 /*
 * @description: 组件控制修改
 * @Author: along
 * @Date: 2020-09-08
 * @Last Modified by: along
 * @Last Modified time: 2021-07-30
 */
<template>
    <div
        class="edit editControl"
        v-if="JSON.stringify(row) !== '{}' && showEdit"
        v-loading="loading"
        :style="{top: top + 'px', height: pageH == 'auto' ? pageH : pageH + 'px'}"
    >
        <template v-if="true">
            <!-- 计算轮播高度使用 -->
            <div
                id="box"
                :style="{display: 'block', height: 'auto'}"
            />

            <!-- 页面基础配置 -->
            <div
                v-if="type == 0"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">页面标题</p>
                    <!-- <i class="iconfont el-icon-hand-close"/> -->
                </div>
                <div class="wrap-list">
                    <p class="name">标题类型</p>
                    <el-radio
                        v-model="row.title_type"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                        @change="changeTitle(row.title_type)"
                    >
                        自定义标题
                    </el-radio>
                    <el-radio
                        v-model="row.title_type"
                        :label="2"
                        @change="changeTitle(row.title_type)"
                    >
                        图片标题
                    </el-radio>
                </div>
                <div class="wrap-content">
                    <div class="wrap-list">
                        <p class="name">页面名称</p>
                        <el-input
                            type="text"
                            placeholder="请输入内容"
                            v-model="row.title_text"
                            maxlength="8"
                            show-word-limit
                            class="wrap-title-text"
                            size="small"
                            :style="{width: '255px'}"
                        />
                    </div>
                    <div class="wrap-list">
                        <p class="name">标题栏背景色</p>
                        <div class="wrap-color">
                            <el-color-picker
                                v-model="row.title_background"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                @click="row.title_background = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                    <div class="wrap-list">
                        <p class="name">页面背景色</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: '61px'}"
                        >
                            <el-color-picker
                                v-model="row.background_color"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                @click="row.background_color = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                    <div
                        class="wrap-list"
                        v-if="row.title_type == 2"
                        :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                    >
                        <p class="name">图片标题</p>
                        <p class="name-desc">图片宽度750*高度176px，支持png、jpg</p>
                        <div class="wrap-side">
                            <div
                                class="side-list"
                                v-if="!row.title_image"
                            >
                                <i class="iconfont el-icon-hand-iconjia"/>
                                <p class="side-text">添加图片</p>
                            </div>
                            <div
                                class="side-content"
                                v-if="row.title_image"
                            >
                                <div
                                    :style="{backgroundImage: `url(${row.title_image})`, backgroundSize: 'cover'}"
                                    class="side-content-image"
                                />
                                <i
                                    class="iconfont el-icon-hand-shanchu1"
                                    @click="row.title_image = ''"
                                />
                            </div>
                            <input
                                accept="image/*"
                                type="file"
                                class="upload-title-image"
                                @change="tirggerFile($event, 'tab')"
                                @mouseenter="handEnterTab(row.title_image)"
                                @mouseleave="tabFlag = false"
                            >
                            <div
                                class="upload-title-hover"
                                v-if="tabFlag"
                            >
                                <p class="title-hover">点击替换</p>
                            </div>
                        </div>
                    </div>
                    <div class="wrap-list">
                        <p class="name">是否通栏</p>
                        <el-radio
                            v-model="row.header_type"
                            :label=" 'transparent' "
                            :style="{marginLeft: '16px'}"
                        >
                            通栏
                        </el-radio>
                        <el-radio
                            v-model="row.header_type"
                            :label=" ''"
                        >
                            不通栏
                        </el-radio>
                    </div>
                    <div class="wrap-list">
                        <p class="name">图标色值</p>
                        <el-radio
                            v-model="row.icon_type"
                            :label="1"
                            :style="{marginLeft: '16px'}"
                        >
                            黑色
                        </el-radio>
                        <el-radio
                            v-model="row.icon_type"
                            :label="2"
                        >
                            白色
                        </el-radio>
                    </div>
                    <div class="wrap-list">
                        <p class="name">分享(开启即支持分享/关闭不支持分享)</p>
                        <el-switch
                            v-model="row.share_config.enable"
                            active-color="#20A0FF"
                            inactive-color="#DDDFE5"
                            :active-value="true"
                            :inactive-value="false"
                            :style="{marginLeft: '46px'}"
                        />
                    </div>
                    <div
                        class="wrap-share"
                        v-if="row.share_config.enable"
                    >
                        <div
                            class="wrap-list"
                            v-if="!!row.share_config['share_award']"
                            :style="{marginLeft: '-30px'}"
                        >
                            <p class="name">分享奖励类型</p>
                            <el-radio
                                v-model="row.share_config['share_award']['type']"
                                :label="0"
                                :style="{marginLeft: '16px'}"
                            >
                                无奖励
                            </el-radio>
                            <el-radio
                                v-model="row.share_config['share_award']['type']"
                                :label="1"
                            >
                                分享领取优惠券
                            </el-radio>
                        </div>
                        <div
                            class="wrap-list left"
                            v-if="!!row.share_config['share_award'] && row.share_config['share_award']['type'] ==1"
                        >
                            <p
                                class="names"
                                :style="{whiteSpace: 'nowrap'}"
                            >优惠券</p>
                            <el-input
                                type="text"
                                placeholder="请输入优惠券id"
                                v-model="row.share_config['share_award']['coupon_no']"
                                show-word-limit
                                class="wrap-title-text"
                                size="small"
                                :style="{width: '145px'}"
                            />
                            <el-button
                                size="small"
                                type="primary"
                                :style="{width: '62px', marginLeft: '15px'}"
                                @click="$refs.couponSelect.show('share_config')"
                            >
                                选择
                            </el-button>
                        </div>
                        <div
                            class="wrap-list left"
                            v-if="!!row.share_config['share_award'] && row.share_config['share_award']['type'] == 1"
                        >
                            <p
                                class="names"
                                :style="{whiteSpace: 'nowrap'}"
                            >分享次数</p>
                            <el-input
                                type="text"
                                placeholder="请输入分享的次数"
                                v-model="row.share_config.share_award.share_limit"
                                show-word-limit
                                size="small"
                                maxlength="2"
                                :style="{width: '229px'}"
                                oninput="value = value.replace(/[^\d]/g,'')"
                            />
                        </div>
                        <div
                            class="wrap-list left"
                            v-if="!!row.share_config['share_award']"
                        >
                            <p class="names">按钮样式</p>
                            <el-radio
                                v-model="row.button_style"
                                :label="0"
                                :style="{marginLeft: '16px'}"
                            >
                                系统默认
                            </el-radio>
                            <el-radio
                                v-model="row.button_style"
                                :label="1"
                            >
                                自定义样式
                            </el-radio>
                        </div>
                        <div
                            class="wrap-list left"
                            v-if="!!row.share_config['share_award'] && row.button_style == '1'"
                        >
                            <p class="names">按钮样式</p>
                            <div class="upload uploadControl">

                                <div class="upload-wrap">
                                    <i
                                        v-if="!row.button_image"
                                        class="iconfont el-icon-hand-iconjia"
                                    />
                                    <p
                                        v-if="!row.button_image"
                                        class="upload-text"
                                    >上传图片</p>
                                    <input
                                        accept="image/*"
                                        type="file"
                                        class="upload-good-image"
                                        @change="tirggerFile($event, 'button')"
                                    >
                                    <img
                                        v-if="row.button_image"
                                        :src="row.button_image"
                                        class="upload-image"
                                    >
                                </div>
                                <p class="upload-desc">
                                    图片尺寸90*90px
                                </p>
                            </div>
                        </div>
                        <div class="wrap-list left">
                            <p class="names">分享标题</p>
                            <el-input
                                type="textarea"
                                placeholder="请输入分享标题"
                                v-model="row.share_config.title"
                                maxlength="30"
                                show-word-limit
                                :autosize="{ minRows: 2, maxRows: 4}"
                                :style="{width: '229px'}"
                            />
                        </div>
                        <div class="wrap-list left">
                            <p class="names">分享内容</p>
                            <el-input
                                type="textarea"
                                placeholder="请输入分享内容"
                                v-model="row.share_config.desc"
                                maxlength="30"
                                show-word-limit
                                :autosize="{ minRows: 2, maxRows: 4}"
                                :style="{width: '229px'}"
                            />
                        </div>
                        <div class="wrap-list left">
                            <p class="names">分享图片</p>
                            <div class="upload uploadControl">

                                <div class="upload-wrap">
                                    <i
                                        v-if="!row.share_config.image"
                                        class="iconfont el-icon-hand-iconjia"
                                    />
                                    <p
                                        v-if="!row.share_config.image"
                                        class="upload-text"
                                    >上传图片</p>
                                    <input
                                        accept="image/*"
                                        type="file"
                                        class="upload-good-image"
                                        @change="tirggerFile($event, 'logo')"
                                    >
                                    <img
                                        v-if="row.share_config.image"
                                        :src="row.share_config.image"
                                        class="upload-image"
                                    >
                                </div>
                                <p class="upload-desc">
                                    图片尺寸90*90px
                                </p>
                            </div>
                        </div>
                    </div>
                    <div :style="{borderTop: '1px rgba(240, 242, 247, 1) dashed', marginBottom: '20px', marginTop: '10px'}" />
                    <div
                        class="wrap-list"
                        :style="{marginTop: '2px'}"
                    >
                        <p class="name">社群专用购物袋</p>
                        <div :style="{display: 'flex', flexWrap: 'wrap', position: 'relative', top: '0px'}">
                            <el-radio
                                v-model="row.is_shopping_cart"
                                :label="1"
                                :style="{marginLeft: '16px'}"
                            >
                                展示
                            </el-radio>
                            <el-radio
                                v-model="row.is_shopping_cart"
                                :label="0"
                            >
                                隐藏
                            </el-radio>
                        </div>
                    </div>
                    <div :style="{display: 'flex', margin: '-10px 0 24px 24px'}">
                        <img
                            src="@/assets/image/shop_cart_logo.png"
                            :style="{width: '14px', height: '14px'}"
                        >
                        <p :style="{color: 'rgba(153, 153, 153, 1)', fontSize: '12px', marginLeft: '6px'}">
                            除社群自定义页面外，其他页面禁止“显示”购物袋
                        </p>
                    </div>
                </div>
            </div>

            <!-- 单列图片 -->
            <div
                v-if="type == 1 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">单列图片</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                >
                    <p class="name">单列图片</p>
                    <p class="name-desc">建议图片宽度≤750px，高度≤950px，支持png、jpg、gif</p>
                    <div class="wrap-side">
                        <div
                            class="side-list"
                            v-if="!controList.data.image_url"
                        >
                            <i class="iconfont el-icon-hand-iconjia"/>
                            <p class="side-text">添加图片</p>
                        </div>
                        <div
                            class="side-content"
                            v-if="controList.data.image_url"
                        >
                            <div
                                :style="{backgroundImage: `url(${controList.data.image_url})`, backgroundSize: 'cover'}"
                                class="side-content-image"
                            />
                            <i
                                class="iconfont el-icon-hand-shanchu1"
                                @click="controList.data.image_url = ''"
                            />
                        </div>
                        <input
                            accept="image/*"
                            type="file"
                            class="upload-title-image"
                            @change="tirggerFile($event, 'single')"
                            @mouseenter="handEnterTab(controList.data.image_url)"
                            @mouseleave="tabFlag = false"
                        >
                        <div
                            class="upload-title-hover"
                            v-if="tabFlag"
                        >
                            <p class="title-hover">点击替换</p>
                        </div>
                    </div>
                </div>
                <app-action
                    v-if="initAction"
                    @action="getAction"
                    :action="JSON.stringify(controList.data.action.app_action || {})"
                    :style="{marginLeft: '27px', pointerEvents: !controList.data.image_url ? 'none' : ''}"
                />
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">上下边距</p>
                    <el-slider
                        v-model="controList.style.marginV"
                        :min="0"
                        :max="100"
                        :step="2"
                        :disabled="!controList.data.image_url"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
                </div>
                <div class="wrap-list">
                    <p class="name">左右边距</p>
                    <el-slider
                        v-model="controList.style.marginH"
                        :min="0"
                        :max="100"
                        :step="2"
                        :disabled="!controList.data.image_url"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
                </div>
                <div class="wrap-list">
                    <p class="name">背景颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '81px', pointerEvents: !controList.data.image_url ? 'none' : ''}"
                    >
                        <el-color-picker
                            v-model="controList.style.backgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">控件圆角值</p>
                </div>
                <div class="wrap-list">
                    <div class="rate-main">
                        <div class="rate-main-ipt">
                            <img
                                src="@/assets/image/rate-main.png"
                                class="rate-wrap-bg"
                            >
                            <div class="rate-main-content">
                                <el-input
                                    v-for="(option,index) in 4"
                                    :key="index"
                                    v-model="rate[index]"
                                    size="mini"
                                    @input="changeRate('single')"
                                    :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                />
                            </div>
                        </div>
                        <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                            输入数值设置四个角
                        </p>
                    </div>
                </div>
            </div>

            <!-- 商品组 -->
            <div
                v-if="type == 101 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">商品分组</p>
                </div>
                <div class="wrap-list">
                    <p class="name">商品分组</p>
                    <el-select
                        v-model="controList.data.goods_cate_no"
                        filterable
                        placeholder="请选择商品分组"
                        size="small"
                        @change="getCateList(controList.data.goods_cate_no)"
                        :style="{marginLeft: '16px', width: '255px'}"
                    >
                        <el-option
                            v-for="item in typeList"
                            :key="item.cate_no"
                            :label="item.cate_name"
                            :value="item.cate_no"
                        />
                    </el-select>
                </div>
                <div class="wrap-list">
                    <p class="name">商品排序</p>
                    <div :style="{display: 'flex', flexWrap: 'wrap', position: 'relative', top: '10px'}">
                        <el-radio
                            v-model="controList.data.sort"
                            :label="1"
                            @change="getCateList"
                            :style="{marginLeft: '16px'}"
                        >
                            按排序号
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="2"
                            @change="getCateList"
                        >
                            销量高到低
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="3"
                            @change="getCateList"
                            :style="{marginTop: '13px', marginLeft: '17px'}"
                        >
                            价格低到高
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="4"
                            @change="getCateList"
                            :style="{marginTop: '13px'}"
                        >
                            价格高到低
                        </el-radio>
                    </div>
                </div>
                <div :style="{border: '1px #F0F2F7 dashed', margin: '0 0 24px 0'}"/>
                <div class="wrap-list">
                    <p
                        class="names"
                        :style="{fontWeight: 500}"
                    >分组样式</p>
                </div>
                <div class="wrap-list">
                    <p class="name">分组背景颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '35px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.headerBackgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.headerBackgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">分组默认字体颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '10px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.headerColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.headerColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">分组选中字体颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '10px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.headerActiveColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.headerActiveColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">分组选中按钮颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '10px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.headerActiveBackgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.headerActiveBackgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                >
                    <p class="name">分组标题背景图</p>
                    <p class="name-desc">建议图片宽度≤750px，高度≤950px，同一组图片高度需一致，大小不得超过200KB，支持png、jpg、gif</p>
                    <div class="wrap-side">
                        <div
                            class="side-list"
                            v-if="!controList.style.headerBackgroundImage"
                        >
                            <i class="iconfont el-icon-hand-iconjia"/>
                            <p class="side-text">添加图片</p>
                        </div>
                        <div
                            class="side-content"
                            v-if="controList.style.headerBackgroundImage"
                        >
                            <div
                                :style="{backgroundImage: `url(${controList.style.headerBackgroundImage})`, backgroundSize: 'cover'}"
                                class="side-content-image"
                            />
                            <i
                                class="iconfont el-icon-hand-shanchu1"
                                @click="controList.style.headerBackgroundImage = ''"
                            />
                        </div>
                        <input
                            accept="image/*"
                            type="file"
                            class="upload-title-image"
                            @change="tirggerFile($event, 'cate')"
                            @mouseenter="handEnterTab(controList.style.headerBackgroundImage)"
                            @mouseleave="tabFlag = false"
                        >
                        <div
                            class="upload-title-hover"
                            v-if="tabFlag"
                        >
                            <p class="title-hover">点击替换</p>
                        </div>
                    </div>
                </div>
                <div :style="{border: '1px #F0F2F7 dashed', margin: '0 0 24px 0'}"/>
                <div class="wrap-list">
                    <p
                        class="names"
                        :style="{fontWeight: 500}"
                    >商品样式</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">页面边距</p>
                    <el-slider
                        v-model="controList.style.pageMargin"
                        :min="0"
                        :max="48"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">48PX</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">商品间距</p>
                    <el-slider
                        v-model="controList.style.goodsMargin"
                        :min="0"
                        :max="44"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">44PX</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">模块下边距</p>
                    <el-slider
                        v-model="controList.style.mBottom"
                        :min="0"
                        :max="600"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">600PX</p>
                </div>
                <div class="wrap-list">
                    <p class="name">背景颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '60px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.backgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">菜单位置</p>
                    <el-radio
                        v-model="controList.style.fixHeader"
                        :label="0"
                        :style="{marginLeft: '16px'}"
                    >
                        正常样式
                    </el-radio>
                    <el-radio
                        v-model="controList.style.fixHeader"
                        :label="1"
                    >
                        滚动至顶部固定
                    </el-radio>
                </div>
                <div class="wrap-list">
                    <p class="name">列表样式</p>
                    <el-radio
                        v-model="controList.style.columns"
                        :label="2"
                        :style="{marginLeft: '16px'}"
                    >
                        一行两个
                    </el-radio>
                    <el-radio
                        v-model="controList.style.columns"
                        :label="3"
                    >
                        一行三个
                    </el-radio>
                </div>
                <div class="wrap-list">
                    <p
                        class="name"
                        :style="{whiteSpace: 'nowrap'}"
                    >购买按钮</p>
                    <el-radio
                        v-model="controList.style.goodsButton.show"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                    >
                        显示购买按钮
                    </el-radio>
                    <el-radio
                        v-model="controList.style.goodsButton.show"
                        :label="0"
                    >
                        不显示购买按钮
                    </el-radio>
                </div>
                <div
                    class="wrap-cate"
                    :style="{marginBottom: 0}"
                >
                    <div
                        class="cate-list"
                    >
                        <p class="cate-text">按钮文案修改</p>
                        <el-input
                            v-model="controList.style.goodsButton.text"
                            size="small"
                            maxlength="4"
                            show-word-limit
                            :style="{width: '196px'}"
                        />
                    </div>
                    <div
                        class="cate-list"
                    >
                        <p class="cate-text">按钮颜色修改</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: 0}"
                        >
                            <el-color-picker
                                v-model="controList.style.goodsButton.backgroundColor"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                :style="{marginLeft: '40px'}"
                                @click="controList.style.goodsButton.backgroundColor = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">商品角标</p>
                    <el-radio
                        v-model="controList.style.goodsTag.show"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                        @change="setShopTag(0)"
                    >
                        显示商品角标
                    </el-radio>
                    <el-radio
                        v-model="controList.style.goodsTag.show"
                        :label="0"
                        @change="setShopTag(-1)"
                    >
                        隐藏商品角标
                    </el-radio>
                </div>
                <div
                    v-if="controList.style.goodsTag.show"
                    class="goodsTag"
                    :style="{alignItems: 'flex-start'}"
                >
                    <p class="goodsTag-title">选择角标样式</p>
                    <div class="tag-selecr">
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="0"
                            :style="{marginLeft: '16px'}"
                            @change="setShopTag(0)"
                        >
                            热门
                        </el-radio>
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="1"
                            @change="setShopTag(1)"
                        >
                            新品
                        </el-radio>
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="2"
                            @change="setShopTag(2)"
                        >
                            自定义
                        </el-radio>
                    </div>
                    <div
                        v-if="controList.style.goodsTag.type == 2"
                        class="goodsTag-wrap"
                    >
                        <p class="tag-title">请上传自定义角标: <span :style="{color: '#999999', fontSize: '#999'}">最大的宽、高不得超过375px</span></p>
                        <div class="upload uploadControl">

                            <div class="upload-wrap">
                                <i
                                    v-if="!controList.style.goodsTag.url"
                                    class="iconfont el-icon-hand-iconjia"
                                />
                                <p
                                    v-if="!controList.style.goodsTag.url"
                                    class="upload-text"
                                >添加角标</p>
                                <input
                                    accept="image/*"
                                    type="file"
                                    class="upload-good-image"
                                    @change="tirggerFile($event, 'tag')"
                                >
                                <img
                                    v-if="controList.style.goodsTag.url"
                                    :src="controList.style.goodsTag.url"
                                    class="upload-image"
                                >
                            </div>
                        </div>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '20px', marginBottom: 0}"
                    >
                        <p class="name">顶部距离</p>
                        <el-slider
                            v-model="controList.style.goodsTag.top"
                            :min="0"
                            :max="40"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">40PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">左边距离</p>
                        <el-slider
                            v-model="controList.style.goodsTag.left"
                            :min="0"
                            :max="40"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">40PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">角标宽度</p>
                        <el-slider
                            v-model="controList.style.goodsTag.width"
                            :min="0"
                            :step="2"
                            :max="400"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">400PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">角标高度</p>
                        <el-slider
                            v-model="controList.style.goodsTag.height"
                            :min="0"
                            :max="400"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">400PX</p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">控件圆角值</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginTop: '0px'}"
                >
                    <div class="rate-main">
                        <div class="rate-main-ipt">
                            <img
                                src="@/assets/image/rate-main.png"
                                class="rate-wrap-bg"
                            >
                            <div class="rate-main-content">
                                <el-input
                                    v-for="(option,index) in 4"
                                    :key="index"
                                    v-model="rate[index]"
                                    size="mini"
                                    @input="changeRate('cate')"
                                    :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                />
                            </div>
                        </div>
                        <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                            输入数值设置四个角
                        </p>
                    </div>
                </div>
            </div>

            <!-- 轮播图 -->
            <div
                v-if="type == 3 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">轮播图</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                >
                    <p class="name">上传轮播图</p>
                    <p
                        class="name-desc"
                        :style="{width: '335px', lineHeight: '18px'}"
                    >建议图片宽度≤750px，高度≤950px，同一组图片高度需一致，大小不得超过200KB，支持png、jpg、gif</p>
                    <div
                        v-for="(option,i) in controList.data.images"
                        :key="i"
                        class="slider"
                        @mouseenter="sliderIndex = i"
                    >
                        <div class="slider-head">
                            <p class="name">第{{ i == 0 ? '一' : (i == 1 ? '二' : (i == 2 ? '三' : (i == 3 ? '四' : ''))) }}张</p>
                            <i
                                class="iconfont el-icon-hand-close"
                                @click="deleteSlider(i)"
                            />
                        </div>
                        <div class="wrap-side">
                            <div
                                class="side-list"
                                v-if="!controList.data.images[i].image_url"
                            >
                                <i class="iconfont el-icon-hand-iconjia"/>
                                <p class="side-text">添加图片</p>
                            </div>
                            <div
                                class="side-content"
                                v-if="controList.data.images[i].image_url"
                            >
                                <div
                                    :style="{backgroundImage: `url(${controList.data.images[i].image_url})`, backgroundSize: 'cover'}"
                                    class="side-content-image"
                                />
                                <i
                                    class="iconfont el-icon-hand-shanchu1"
                                    @click="controList.data.images[i].image_url = ''"
                                />
                            </div>
                            <input
                                accept="image/*"
                                type="file"
                                class="upload-title-image"
                                @change="tirggerFile($event, 'slider', i)"
                                @mouseenter="handEnterTab(controList.data.images[i].image_url, i)"
                                @mouseleave="tabFlag = false"
                            >
                            <div
                                class="upload-title-hover"
                                v-if="tabFlag && sliderIndex == i"
                            >
                                <p class="title-hover">点击替换</p>
                            </div>
                        </div>
                        <app-action
                            v-if="initAction"
                            @action="getActionSlider"
                            :action="JSON.stringify(controList.data.images[i].action['app_action'] || {})"
                            :style="{marginTop: '20px', pointerEvents: ''}"
                        />
                    </div>
                    <div :style="{border: '1px #F0F2F7 dashed', width: '375px', margin: '-24px 0 24px 0'}"/>
                    <div
                        class="add-slider"
                        @click="addSlider(4)"
                    >
                        <i class="iconfont el-icon-hand-iconjia"/>
                        添加图片{{ controList.data.images.length }}/4
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '24px',marginLeft: '-24px'}"
                    >
                        <p class="name">控件圆角值</p>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginLeft: '-20px', marginLeft: '-24px'}"
                    >
                        <div class="rate-main">
                            <div class="rate-main-ipt">
                                <img
                                    src="@/assets/image/rate-main.png"
                                    class="rate-wrap-bg"
                                >
                                <div class="rate-main-content">
                                    <el-input
                                        v-for="(option,index) in 4"
                                        :key="index"
                                        v-model="rate[index]"
                                        size="mini"
                                        @input="changeRate('slider')"
                                        :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                    />
                                </div>
                            </div>
                            <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                                输入数值设置四个角
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 多图拼凑 -->
            <div
                v-if="type == 2 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">多图拼凑</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                >
                    <p class="name">图片标题</p>
                    <p
                        class="name-desc"
                        :style="{width: '335px', lineHeight: '18px'}"
                    >建议图片宽度≤750px，高度≤950px，支持png、jpg、gif</p>
                    <div
                        v-for="(option,i) in controList.data.images"
                        :key="i"
                        class="slider"
                        @mouseenter="sliderIndex = i"
                    >
                        <div class="slider-head">
                            <p class="name">模块{{ i | filterNumber }}</p>
                            <i
                                class="iconfont el-icon-hand-close"
                                @click="deleteSlider(i)"
                            />
                        </div>
                        <div class="wrap-side">
                            <div
                                class="side-list"
                                v-if="!controList.data.images[i].image_url"
                            >
                                <i class="iconfont el-icon-hand-iconjia"/>
                                <p class="side-text">添加图片</p>
                            </div>
                            <div
                                class="side-content"
                                v-if="controList.data.images[i].image_url"
                            >
                                <div
                                    :style="{backgroundImage: `url(${controList.data.images[i].image_url})`, backgroundSize: 'cover'}"
                                    class="side-content-image"
                                />
                                <i
                                    class="iconfont el-icon-hand-shanchu1"
                                    @click="controList.data.images[i].image_url = ''"
                                />
                            </div>
                            <input
                                accept="image/*"
                                type="file"
                                class="upload-title-image"
                                @change="tirggerFile($event, 'slider', i)"
                                @mouseenter="handEnterTab(controList.data.images[i].image_url, i)"
                                @mouseleave="tabFlag = false"
                            >
                            <div
                                class="upload-title-hover"
                                v-if="tabFlag && sliderIndex == i"
                            >
                                <p class="title-hover">点击替换</p>
                            </div>
                        </div>
                        <app-action
                            v-if="initAction"
                            @action="getActionSlider"
                            :action="JSON.stringify(controList.data.images[i].action['app_action'])"
                            :style="{marginTop: '20px', pointerEvents: ''}"
                        />
                    </div>
                    <div :style="{border: '1px #F0F2F7 dashed', width: '375px', margin: '-24px 0 24px 0'}"/>
                    <div
                        class="add-slider"
                        @click="addSlider(9)"
                    >
                        <i class="iconfont el-icon-hand-iconjia"/>
                        添加图片{{ controList.data.images.length }}/9
                    </div>
                    <div :style="{border: '1px #F0F2F7 dashed', width: '375px', margin: '24px 0 24px 0'}"/>
                    <div
                        class="wrap-multi"
                        :style="{marginLeft: '-20px'}"
                    >
                        <div
                            class="wrap-list"
                            :style="{marginBottom: '10px'}"
                        >
                            <p class="name">上下边距</p>
                            <el-slider
                                v-model="controList.style.marginV"
                                :min="0"
                                :max="100"
                                :step="2"
                                :style="{width: '180px', marginLeft: '24px'}"
                            />
                            <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
                        </div>
                        <div
                            class="wrap-list"
                            :style="{marginBottom: '10px'}"
                        >
                            <p class="name">左右边距</p>
                            <el-slider
                                v-model="controList.style.marginH"
                                :min="0"
                                :max="100"
                                :step="2"
                                :style="{width: '180px', marginLeft: '24px'}"
                            />
                            <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
                        </div>
                        <div class="wrap-list">
                            <p class="name">排列样式</p>
                            <el-radio
                                v-model="controList.style.columns"
                                :label="2"
                                :style="{marginLeft: '16px'}"
                            >
                                两图
                            </el-radio>
                            <el-radio
                                v-model="controList.style.columns"
                                :label="3"
                            >
                                三图
                            </el-radio>
                            <el-radio
                                v-model="controList.style.columns"
                                :label="4"
                            >
                                四图
                            </el-radio>
                        </div>
                        <div class="wrap-list">
                            <p class="name">背景颜色</p>
                            <div
                                class="wrap-color"
                                :style="{marginLeft: '55px'}"
                            >
                                <el-color-picker
                                    v-model="controList.style.backgroundColor"
                                    show-alpha
                                    class="edit-tab-bg"
                                />
                                <p
                                    class="wrap-rest"
                                    @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                                >
                                    重置
                                </p>
                            </div>
                        </div>
                        <div class="wrap-list">
                            <p class="name">控件圆角值</p>
                        </div>
                        <div
                            class="wrap-list"
                            :style="{marginTop: '0px', marginBottom: '0'}"
                        >
                            <div class="rate-main">
                                <div class="rate-main-ipt">
                                    <img
                                        src="@/assets/image/rate-main.png"
                                        class="rate-wrap-bg"
                                    >
                                    <div class="rate-main-content">
                                        <el-input
                                            v-for="(option,index) in 4"
                                            :key="index"
                                            v-model="rate[index]"
                                            size="mini"
                                            @input="changeRate('multi')"
                                            :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                        />
                                    </div>
                                </div>
                                <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                                    输入数值设置四个角
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 自定义商品 -->
            <div
                v-if="type == 103 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">自定义商品</p>
                </div>
                <div class="wrap-list">
                    <p class="name">选择商品</p>
                    <div
                        class="_nav"
                        :style="{justifyContent: controList.data.goods_nos.length > 0 ? 'flex-end' : 'flex-start'}"
                    >
                        <p
                            class="_nav_button"
                            @click="$refs.goodsSelect.show(2)"
                            v-if="controList.data.goods_nos.length === 0"
                        >
                            添加商品
                        </p>
                        <p
                            class="_nav_clear"
                            v-if="controList.data.goods_nos.length > 0"
                            @click="$refs.clearDialog.showDialog()"
                        >
                            清空
                        </p>
                        <p
                            class="_nav_edit"
                            v-if="controList.data.goods_nos.length > 0"
                            @click="editCustomList()"
                        >
                            编辑
                        </p>
                    </div>
                </div>
                <div
                    class="_wrap"
                    v-if="changeCustonData.length > 0"
                >
                    <draggable
                        v-model="changeCustonData"
                        @end="watchDraggable"
                        :style="{display: 'flex', flexWrap: 'wrap', width: '346px'}"
                        v-if="controList.data.sort == 1"
                    >
                        <div
                            v-for="(item, index) in changeCustonData"
                            :key="index"
                            :style="{width: '60px', minHeight: '60px'}"
                            class="_wrap_item"
                        >
                            <div
                                :style="{background: `url(${item.goods_cover}) center center`, backgroundSize: '60px 60px'}"
                                class="_wrap_image"
                            />
                            <p
                                class="_wrap_icon"
                                @click="deleteCustomImage(index)"
                            >
                                <i class="el-icon-error" />
                            </p>
                        </div>
                    </draggable>
                    <div
                        :style="{display: 'flex', flexWrap: 'wrap', width: '346px'}"
                        v-else
                    >
                        <div
                            v-for="(item, index) in changeCustonData"
                            :key="index"
                            :style="{width: '60px', minHeight: '60px'}"
                            class="_wrap_item"
                        >
                            <div
                                :style="{background: `url(${item.goods_cover}) center center`, backgroundSize: '60px 60px'}"
                                class="_wrap_image"
                            />
                            <p
                                class="_wrap_icon"
                                @click="deleteCustomImage(index)"
                            >
                                <i class="el-icon-error" />
                            </p>
                        </div>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">商品排序</p>
                    <div :style="{display: 'flex', flexWrap: 'wrap', position: 'relative', top: '16px'}">
                        <el-radio
                            v-model="controList.data.sort"
                            :label="1"
                            @change="sortCustomList(1)"
                            :style="{marginLeft: '16px'}"
                        >
                            自定义排序
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="2"
                            @change="sortCustomList(2)"
                        >
                            销量高到低
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="3"
                            @change="sortCustomList(3)"
                            :style="{marginTop: '13px', marginLeft: '17px'}"
                        >
                            价格低到高
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="4"
                            @change="sortCustomList(4)"
                            :style="{marginTop: '13px'}"
                        >
                            价格高到低
                        </el-radio>
                    </div>
                </div>
                <div :style="{border: '1px #F0F2F7 dashed', margin: '0 0 24px 0'}"/>
                <div class="wrap-list">
                    <p
                        class="names"
                        :style="{fontWeight: 500}"
                    >商品样式</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">页面边距</p>
                    <el-slider
                        v-model="controList.style.pageMargin"
                        :min="0"
                        :max="48"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">48PX</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">商品间距</p>
                    <el-slider
                        v-model="controList.style.goodsMargin"
                        :min="0"
                        :max="44"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">44PX</p>
                </div>
                <div class="wrap-list">
                    <p class="name">背景颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '60px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.backgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">列表样式</p>
                    <el-radio
                        v-model="controList.style.columns"
                        :label="2"
                        :style="{marginLeft: '16px'}"
                    >
                        一行两个
                    </el-radio>
                    <el-radio
                        v-model="controList.style.columns"
                        :label="3"
                    >
                        一行三个
                    </el-radio>
                </div>
                <div class="wrap-list">
                    <p
                        class="name"
                        :style="{whiteSpace: 'nowrap'}"
                    >购买按钮</p>
                    <el-radio
                        v-model="controList.style.goodsButton.show"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                    >
                        显示购买按钮
                    </el-radio>
                    <el-radio
                        v-model="controList.style.goodsButton.show"
                        :label="0"
                    >
                        不显示购买按钮
                    </el-radio>
                </div>
                <div
                    class="wrap-cate"
                    :style="{marginBottom: 0}"
                >
                    <div
                        class="cate-list"
                    >
                        <p class="cate-text">按钮文案修改</p>
                        <el-input
                            v-model="controList.style.goodsButton.text"
                            size="small"
                            maxlength="4"
                            show-word-limit
                            :style="{width: '196px'}"
                        />
                    </div>
                    <div
                        class="cate-list"
                    >
                        <p class="cate-text">按钮颜色修改</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: 0}"
                        >
                            <el-color-picker
                                v-model="controList.style.goodsButton.backgroundColor"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                :style="{marginLeft: '40px'}"
                                @click="controList.style.goodsButton.backgroundColor = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">商品角标</p>
                    <el-radio
                        v-model="controList.style.goodsTag.show"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                        @change="setShopTag(0)"
                    >
                        显示商品角标
                    </el-radio>
                    <el-radio
                        v-model="controList.style.goodsTag.show"
                        :label="0"
                        @change="setShopTag(-1)"
                    >
                        隐藏商品角标
                    </el-radio>
                </div>
                <div
                    v-if="controList.style.goodsTag.show"
                    class="goodsTag"
                    :style="{alignItems: 'flex-start'}"
                >
                    <p class="goodsTag-title">选择角标样式</p>
                    <div class="tag-selecr">
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="0"
                            :style="{marginLeft: '16px'}"
                            @change="setShopTag(0)"
                        >
                            热门
                        </el-radio>
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="1"
                            @change="setShopTag(1)"
                        >
                            新品
                        </el-radio>
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="2"
                            @change="setShopTag(2)"
                        >
                            自定义
                        </el-radio>
                    </div>
                    <div
                        v-if="controList.style.goodsTag.type == 2"
                        class="goodsTag-wrap"
                    >
                        <p class="tag-title">请上传自定义角标: <span :style="{color: '#999999', fontSize: '#999'}">最大的宽、高不得超过375px</span></p>
                        <div class="upload uploadControl">
                            <div class="upload-wrap">
                                <i
                                    v-if="!controList.style.goodsTag.url"
                                    class="iconfont el-icon-hand-iconjia"
                                />
                                <p
                                    v-if="!controList.style.goodsTag.url"
                                    class="upload-text"
                                >添加角标</p>
                                <input
                                    accept="image/*"
                                    type="file"
                                    class="upload-good-image"
                                    @change="tirggerFile($event, 'tag')"
                                >
                                <img
                                    v-if="controList.style.goodsTag.url"
                                    :src="controList.style.goodsTag.url"
                                    class="upload-image"
                                >
                            </div>
                        </div>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '20px', marginBottom: 0}"
                    >
                        <p class="name">顶部距离</p>
                        <el-slider
                            v-model="controList.style.goodsTag.top"
                            :min="0"
                            :max="40"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">40PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">左边距离</p>
                        <el-slider
                            v-model="controList.style.goodsTag.left"
                            :min="0"
                            :max="40"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">40PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">角标宽度</p>
                        <el-slider
                            v-model="controList.style.goodsTag.width"
                            :min="0"
                            :step="2"
                            :max="400"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">400PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">角标高度</p>
                        <el-slider
                            v-model="controList.style.goodsTag.height"
                            :min="0"
                            :max="400"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">400PX</p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">控件圆角值</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginTop: '0px'}"
                >
                    <div class="rate-main">
                        <div class="rate-main-ipt">
                            <img
                                src="@/assets/image/rate-main.png"
                                class="rate-wrap-bg"
                            >
                            <div class="rate-main-content">
                                <el-input
                                    v-for="(option,index) in 4"
                                    :key="index"
                                    v-model="rate[index]"
                                    size="mini"
                                    @input="changeRate('custom')"
                                    :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                />
                            </div>
                        </div>
                        <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                            输入数值设置四个角
                        </p>
                    </div>
                </div>
            </div>

            <!-- 社群专享 -->
            <div
                v-if="type == 105 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">社群专享商品</p>
                </div>
                <div class="wrap-list">
                    <p class="name">选择商品</p>
                    <div
                        class="_nav"
                        :style="{justifyContent: controList.data.gg_nos.length > 0 ? 'flex-end' : 'flex-start'}"
                    >
                        <p
                            class="_nav_button"
                            @click="$refs.goodsSelect2.show(2)"
                            v-if="controList.data.gg_nos.length === 0"
                        >
                            添加商品
                        </p>
                        <p
                            class="_nav_clear"
                            v-if="controList.data.gg_nos.length > 0"
                            @click="$refs.clearDialog2.showDialog()"
                        >
                            清空
                        </p>
                        <p
                            class="_nav_edit"
                            v-if="controList.data.gg_nos.length > 0"
                            @click="editComminityList()"
                        >
                            编辑
                        </p>
                    </div>
                </div>
                <div
                    class="_wrap"
                    v-if="changeCommonData.length > 0"
                >
                    <!-- 社群商品无自定义排序 -->
                    <draggable
                        v-model="changeCommonData"
                        @end="watchDraggableCommon"
                        :style="{display: 'flex', flexWrap: 'wrap', width: '346px'}"
                        v-if="controList.data.sort == 1"
                    >
                        <div
                            v-for="(item, index) in changeCommonData"
                            :key="index"
                            :style="{width: '60px', minHeight: '60px'}"
                            class="_wrap_item"
                        >
                            <div
                                :style="{background: `url(${item.goods_cover}) center center`, backgroundSize: '60px 60px'}"
                                class="_wrap_image"
                            />
                            <p
                                class="_wrap_icon"
                                @click="deleteCustomImageCommon(index)"
                            >
                                <i class="el-icon-error" />
                            </p>
                        </div>
                    </draggable>
                    <div
                        :style="{display: 'flex', flexWrap: 'wrap', width: '346px'}"
                        v-else
                    >
                        <div
                            v-for="(item, index) in changeCommonData"
                            :key="index"
                            :style="{width: '60px', minHeight: '60px'}"
                            class="_wrap_item"
                        >
                            <div
                                :style="{background: `url(${item.goods_cover}) center center`, backgroundSize: '60px 60px'}"
                                class="_wrap_image"
                            />
                            <p
                                class="_wrap_icon"
                                @click="deleteCustomImageCommon(index)"
                            >
                                <i class="el-icon-error" />
                            </p>
                        </div>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">商品排序</p>
                    <div :style="{display: 'flex', flexWrap: 'wrap', position: 'relative', top: '16px'}">
                        <el-radio
                            v-model="controList.data.sort"
                            :label="1"
                            @change="sortCustomListCommon(1)"
                            :style="{marginLeft: '16px'}"
                        >
                            自定义排序
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="2"
                            @change="sortCustomListCommon(2)"
                        >
                            销量高到低
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="3"
                            @change="sortCustomListCommon(3)"
                            :style="{marginTop: '13px', marginLeft: '17px'}"
                        >
                            价格低到高
                        </el-radio>
                        <el-radio
                            v-model="controList.data.sort"
                            :label="4"
                            @change="sortCustomListCommon(4)"
                            :style="{marginTop: '13px'}"
                        >
                            价格高到低
                        </el-radio>
                    </div>
                </div>
                <div :style="{border: '1px #F0F2F7 dashed', margin: '0 0 24px 0'}"/>
                <div class="wrap-list">
                    <p
                        class="names"
                        :style="{fontWeight: 500}"
                    >商品样式</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">页面边距</p>
                    <el-slider
                        v-model="controList.style.pageMargin"
                        :min="0"
                        :max="48"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">48PX</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">商品间距</p>
                    <el-slider
                        v-model="controList.style.goodsMargin"
                        :min="0"
                        :max="44"
                        :step="2"
                        :style="{width: '190px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">44PX</p>
                </div>
                <div class="wrap-list">
                    <p class="name">背景颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '60px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.backgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">列表样式</p>
                    <el-radio
                        v-model="controList.style.columns"
                        :label="2"
                        :style="{marginLeft: '16px'}"
                    >
                        一行两个
                    </el-radio>
                    <el-radio
                        v-model="controList.style.columns"
                        :label="3"
                    >
                        一行三个
                    </el-radio>
                </div>
                <div class="wrap-list">
                    <p
                        class="name"
                        :style="{whiteSpace: 'nowrap'}"
                    >购买按钮</p>
                    <el-radio
                        v-model="controList.style.goodsButton.show"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                    >
                        显示购买按钮
                    </el-radio>
                    <el-radio
                        v-model="controList.style.goodsButton.show"
                        :label="0"
                    >
                        不显示购买按钮
                    </el-radio>
                </div>
                <div
                    class="wrap-cate"
                    :style="{marginBottom: 0}"
                >
                    <div
                        class="cate-list"
                    >
                        <p class="cate-text">按钮文案修改</p>
                        <el-input
                            v-model="controList.style.goodsButton.text"
                            size="small"
                            maxlength="4"
                            show-word-limit
                            :style="{width: '196px'}"
                        />
                    </div>
                    <div
                        class="cate-list"
                    >
                        <p class="cate-text">按钮颜色修改</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: 0}"
                        >
                            <el-color-picker
                                v-model="controList.style.goodsButton.backgroundColor"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                :style="{marginLeft: '40px'}"
                                @click="controList.style.goodsButton.backgroundColor = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">商品角标</p>
                    <el-radio
                        v-model="controList.style.goodsTag.show"
                        :label="1"
                        :style="{marginLeft: '16px'}"
                        @change="setShopTag(0)"
                    >
                        显示商品角标
                    </el-radio>
                    <el-radio
                        v-model="controList.style.goodsTag.show"
                        :label="0"
                        @change="setShopTag(-1)"
                    >
                        隐藏商品角标
                    </el-radio>
                </div>
                <div
                    v-if="controList.style.goodsTag.show"
                    class="goodsTag"
                    :style="{alignItems: 'flex-start'}"
                >
                    <p class="goodsTag-title">选择角标样式</p>
                    <div class="tag-selecr">
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="0"
                            :style="{marginLeft: '16px'}"
                            @change="setShopTag(0)"
                        >
                            热门
                        </el-radio>
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="1"
                            @change="setShopTag(1)"
                        >
                            新品
                        </el-radio>
                        <el-radio
                            v-model="controList.style.goodsTag.type"
                            :label="2"
                            @change="setShopTag(2)"
                        >
                            自定义
                        </el-radio>
                    </div>
                    <div
                        v-if="controList.style.goodsTag.type == 2"
                        class="goodsTag-wrap"
                    >
                        <p class="tag-title">请上传自定义角标: <span :style="{color: '#999999', fontSize: '#999'}">最大的宽、高不得超过375px</span></p>
                        <div class="upload uploadControl">
                            <div class="upload-wrap">
                                <i
                                    v-if="!controList.style.goodsTag.url"
                                    class="iconfont el-icon-hand-iconjia"
                                />
                                <p
                                    v-if="!controList.style.goodsTag.url"
                                    class="upload-text"
                                >添加角标</p>
                                <input
                                    accept="image/*"
                                    type="file"
                                    class="upload-good-image"
                                    @change="tirggerFile($event, 'tag')"
                                >
                                <img
                                    v-if="controList.style.goodsTag.url"
                                    :src="controList.style.goodsTag.url"
                                    class="upload-image"
                                >
                            </div>
                        </div>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '20px', marginBottom: 0}"
                    >
                        <p class="name">顶部距离</p>
                        <el-slider
                            v-model="controList.style.goodsTag.top"
                            :min="0"
                            :max="40"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">40PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">左边距离</p>
                        <el-slider
                            v-model="controList.style.goodsTag.left"
                            :min="0"
                            :max="40"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">40PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">角标宽度</p>
                        <el-slider
                            v-model="controList.style.goodsTag.width"
                            :min="0"
                            :step="2"
                            :max="400"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">400PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">角标高度</p>
                        <el-slider
                            v-model="controList.style.goodsTag.height"
                            :min="0"
                            :max="400"
                            :step="2"
                            :style="{width: '140px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">400PX</p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">控件圆角值</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginTop: '0px'}"
                >
                    <div class="rate-main">
                        <div class="rate-main-ipt">
                            <img
                                src="@/assets/image/rate-main.png"
                                class="rate-wrap-bg"
                            >
                            <div class="rate-main-content">
                                <el-input
                                    v-for="(option,index) in 4"
                                    :key="index"
                                    v-model="rate[index]"
                                    size="mini"
                                    @input="changeRate('custom')"
                                    :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                />
                            </div>
                        </div>
                        <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                            输入数值设置四个角
                        </p>
                    </div>
                </div>
            </div>

            <!-- 倒计时 -->
            <div
                v-if="type == 6 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">倒计时</p>
                </div>
                <div class="_count">
                    <p class="_count_title">显示设置</p>
                    <div class="_count_item">
                        <p class="_count_text">开始时间</p>
                        <el-date-picker
                            v-model="controList.data.start_time"
                            type="datetime"
                            placeholder="选择开始时间"
                            size="small"
                            :style="{width: '255px', marginLeft: '16px'}"
                            @change="changeDate('start')"
                        />
                    </div>
                    <div class="_count_item">
                        <p class="_count_text">结束时间</p>
                        <el-date-picker
                            v-model="controList.data.end_time"
                            type="datetime"
                            placeholder="选择结束时间"
                            size="small"
                            :style="{width: '255px', marginLeft: '16px'}"
                            @change="changeDate('end')"
                        />
                    </div>
                    <div class="_count_list">
                        <p class="_count_text">显示纬度</p>
                        <el-radio
                            v-model="controList.style.type"
                            :label="0"
                            :style="{marginLeft: '14px', marginRight: 0}"
                        >
                            按小时
                        </el-radio>
                        <el-radio
                            v-model="controList.style.type"
                            :label="1"
                            :style="{marginLeft: '14px', marginRight: 0}"
                        >
                            按天
                        </el-radio>
                    </div>
                    <div class="_count_line" />
                    <p class="_count_title">样式设置</p>
                    <div class="_count_list">
                        <p class="_count_text">时间样式</p>
                        <el-radio
                            v-model="controList.style.time_style"
                            :label="0"
                            :style="{marginLeft: '14px', marginRight: 0}"
                        >
                            样式1
                        </el-radio>
                        <el-radio
                            v-model="controList.style.time_style"
                            :label="1"
                            :style="{marginLeft: '14px', marginRight: 0}"
                        >
                            样式2
                        </el-radio>
                        <el-radio
                            v-model="controList.style.time_style"
                            :label="2"
                            :style="{marginLeft: '14px', marginRight: 0}"
                            @change="setColor(controList)"
                        >
                            样式3
                        </el-radio>
                    </div>
                    <div class="_count_item">
                        <p class="_count_text">中文颜色</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: '73px'}"
                        >
                            <el-color-picker
                                v-model="controList.style.text_color"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                @click="controList.style.text_color = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                    <div class="_count_item">
                        <p class="_count_text">数字颜色</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: '73px'}"
                        >
                            <el-color-picker
                                v-model="controList.style.number_color"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                @click="controList.style.number_color = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                    <div class="_count_list">
                        <p class="_count_text">背景样式</p>
                        <el-radio
                            v-model="controList.style.background_type"
                            :label="0"
                            :style="{marginLeft: '14px', marginRight: 0}"
                        >
                            纯色背景
                        </el-radio>
                        <el-radio
                            v-model="controList.style.background_type"
                            :label="1"
                            :style="{marginLeft: '14px', marginRight: 0}"
                        >
                            图片背景
                        </el-radio>
                    </div>
                    <div
                        class="_count_item"
                        v-if="controList.style.background_type == 0"
                    >
                        <p class="_count_text">纯色背景</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: '73px'}"
                        >
                            <el-color-picker
                                v-model="controList.style.backgroundColor"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{flexDirection: 'column', alignItems: 'flex-start', marginLeft: '-24px', marginTop: '24px'}"
                        v-if="controList.style.background_type == 1"
                    >
                        <p class="name">图片背景</p>
                        <p class="name-desc">图片宽度750px，支持png、jpg</p>
                        <div class="wrap-side">
                            <div
                                class="side-list"
                                v-if="!controList.style.backgroundImage"
                            >
                                <i class="iconfont el-icon-hand-iconjia"/>
                                <p class="side-text">添加图片</p>
                            </div>
                            <div
                                class="side-content"
                                v-if="controList.style.backgroundImage"
                            >
                                <div
                                    :style="{backgroundImage: `url(${controList.style.backgroundImage})`, backgroundSize: 'cover'}"
                                    class="side-content-image"
                                />
                                <i
                                    class="iconfont el-icon-hand-shanchu1"
                                    @click="controList.style.backgroundImage = ''"
                                />
                            </div>
                            <input
                                accept="image/*"
                                type="file"
                                class="upload-title-image"
                                @change="tirggerFile($event, 'countDown')"
                                @mouseenter="handEnterTab(controList.style.backgroundImage)"
                                @mouseleave="tabFlag = false"
                            >
                            <div
                                class="upload-title-hover"
                                v-if="tabFlag"
                            >
                                <p class="title-hover">点击替换</p>
                            </div>
                        </div>
                    </div>
                    <div class="_count_line" />
                    <p class="_count_title">间距设置</p>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '10px', marginLeft: '-24px'}"
                    >
                        <p class="name">上下边距</p>
                        <el-slider
                            v-model="controList.style.marginV"
                            :min="0"
                            :max="50"
                            :step="2"
                            :style="{width: '190px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">50PX</p>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '-10px', marginLeft: '-24px'}"
                    >
                        <p class="name">左边边距</p>
                        <el-slider
                            v-model="controList.style.marginH"
                            :min="0"
                            :max="320"
                            :step="2"
                            :style="{width: '190px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">320PX</p>
                    </div>
                </div>
            </div>

            <!-- 辅助空白 -->
            <div
                v-if="type == 4 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">辅助空白</p>
                </div>
                <div class="wrap-list">
                    <p class="name">空白颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '55px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.backgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">空白高度</p>
                    <el-slider
                        v-model="controList.style.height"
                        :min="0"
                        :max="300"
                        :step="2"
                        :style="{width: '180px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">300PX</p>
                </div>
            </div>

            <!-- 辅助线条 -->
            <div
                v-if="type == 5 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">辅助线条</p>
                </div>
                <div class="wrap-list">
                    <p class="name">线条样式</p>
                    <el-radio
                        v-model="controList.style.style"
                        :label="'solid'"
                        :style="{marginLeft: '16px'}"
                    >
                        实线
                    </el-radio>
                    <el-radio
                        v-model="controList.style.style"
                        :label="'dashed'"
                    >
                        虚线
                    </el-radio>
                    <el-radio
                        v-model="controList.style.style"
                        :label="'dotted'"
                    >
                        点状
                    </el-radio>
                </div>
                <div class="wrap-list">
                    <p class="name">背景颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '55px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.backgroundColor"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div class="wrap-list">
                    <p class="name">线条颜色</p>
                    <div
                        class="wrap-color"
                        :style="{marginLeft: '55px'}"
                    >
                        <el-color-picker
                            v-model="controList.style.color"
                            show-alpha
                            class="edit-tab-bg"
                        />
                        <p
                            class="wrap-rest"
                            @click="controList.style.color = 'rgba(255,255,255,1)'"
                        >
                            重置
                        </p>
                    </div>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">线条高度</p>
                    <el-slider
                        v-model="controList.style.height"
                        :min="0"
                        :max="200"
                        :step="2"
                        :style="{width: '180px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">200PX</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '10px'}"
                >
                    <p class="name">上下边距</p>
                    <el-slider
                        v-model="controList.style.marginV"
                        :min="0"
                        :max="200"
                        :step="2"
                        :style="{width: '180px', marginLeft: '24px'}"
                    />
                    <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">200PX</p>
                </div>
            </div>

            <!-- 自定义优惠券组件 -->
            <div
                v-if="type == 106 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">优惠券</p>
                </div>
                <div class="__coupon">
                    <template v-if="customCouponList.length">
                        <div
                            v-for="(row,i) in customCouponList"
                            :key="i"
                            class="__coupon_items"
                            @mouseenter="sliderIndex = i"
                        >
                            <div class="__coupon_header">
                                <p>优惠券模块{{ i | filterNumber }}</p>
                                <i
                                    class="iconfont el-icon-hand-close"
                                    @click="handleDeleteData('coupon', i)"
                                />
                            </div>
                            <!-- 未选择优惠券 -->
                            <div
                                class="__coupon_add"
                                @click="$refs.couponSelect.show('custom_coupon')"
                                v-if="!row.coupon_no"
                            >
                                <i class="iconfont el-icon-hand-iconjia" />
                                添加优惠券
                            </div>
                            <!-- 已选择优惠券 -->
                            <div
                                v-if="row.coupon_no"
                                class="__coupon_data"
                                @click="$refs.couponSelect.show('custom_coupon')"
                            >
                                <p class="__coupon_title">
                                    {{ row.title }}
                                </p>
                                <p
                                    class="__coupon_limit"
                                >
                                    {{ row.discount_info }}
                                </p>
                            </div>
                            <!-- 已上传背景图 -->
                            <template v-if="row.cover_image">
                                <div class="__coupon_img">
                                    <div
                                        class="__coupon_left"
                                        :style="{background: `url(${row.cover_image}) center center`, backgroundSize: 'cover'}"
                                    >
                                        <div
                                            class="__coupon_tc"
                                            v-if="tabFlag && sliderIndex === i"
                                        >
                                            <p>点击替换</p>
                                        </div>
                                        <input
                                            accept="image/*"
                                            type="file"
                                            class="upload_title_image"
                                            @change="tirggerFile($event, 'custom_coupon', i)"
                                            @mouseenter="handEnterTab(customCouponList[i].cover_image, i)"
                                            @mouseleave="tabFlag = false"
                                        >
                                    </div>
                                    <img
                                        src="http://cdn.zsdx.cn/student-app/images/delete.png"
                                        class="__coupon_delete"
                                        @click="row.cover_image = ''"
                                    >
                                </div>
                            </template>
                            <!-- 未上传背景图 -->
                            <template v-if="!row.cover_image">
                                <div class="__coupon_change">
                                    <input
                                        accept="image/*"
                                        type="file"
                                        class="upload-title-image"
                                        @change="tirggerFile($event, 'custom_coupon', i)"
                                        @mouseenter="handEnterTab(customCouponList[i].cover_image, i)"
                                        @mouseleave="tabFlag = false"
                                    >
                                    <div class="__coupon_img_url">
                                        <i class="iconfont el-icon-hand-iconjia" />
                                        添加优惠券图片
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                    <div
                        class="__add_coupon"
                        @click="handleAddCoupon()"
                    >
                        <i class="iconfont el-icon-hand-iconjia" />
                        添加优惠券模块{{ customCouponList.length }}/9
                    </div>
                    <div class="__coupon_lines" />
                    <div class="__coupon_set">
                        <p class="__coupon_set_title">
                            排列样式设置
                        </p>
                        <div class="__coupon_color">
                            <p class="__coupon_color_name">
                                背景颜色
                            </p>
                            <div
                                class="wrap-color"
                                :style="{marginLeft: 0}"
                            >
                                <el-color-picker
                                    v-model="controList.style.backgroundColor"
                                    show-alpha
                                    class="edit-tab-bg"
                                />
                                <p
                                    class="wrap-rest"
                                    :style="{marginLeft: '40px'}"
                                    @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                                >
                                    重置
                                </p>
                            </div>
                        </div>
                        <div class="__coupon_slider">
                            <p class="__coupon_name">上下边距</p>
                            <el-slider
                                v-model="controList.style.marginV"
                                :min="0"
                                :max="50"
                                :step="2"
                                :style="{flex: 1}"
                            />
                            <p class="__coupon_max">50PX</p>
                        </div>
                        <div class="__coupon_slider">
                            <p class="__coupon_name">左右边距</p>
                            <el-slider
                                v-model="controList.style.marginH"
                                :min="0"
                                :max="50"
                                :step="2"
                                :style="{flex: 1}"
                            />
                            <p class="__coupon_max">50PX</p>
                        </div>
                        <div class="__coupon_radio">
                            <p class="__coupon_name">
                                排列样式
                            </p>
                            <div class="__coupon_list">
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="0"
                                >
                                    大图模式
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="1"
                                >
                                    一行两个
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="2"
                                >
                                    一行三个
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="3"
                                    :style="{marginTop: '12px'}"
                                >
                                    一行四个
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="4"
                                    :style="{marginTop: '12px'}"
                                >
                                    横向滑动
                                </el-radio>
                            </div>
                        </div>
                        <div
                            v-if="controList.style.coupon_array === 4"
                            class="__coupon_width"
                        >
                            <el-input
                                v-model="controList.style.coupon_width"
                                placeholder="请输入单张优惠券的宽度"
                                size="medium"
                                :style="{width: '256px', marginLeft: '71px'}"
                                oninput="value = value.replace(/[^\d]/g,'')"
                            />
                            <p class="__coupon_px">px</p>
                        </div>
                        <div
                            class="__coupon_preview"
                            :style="{marginBottom: !controList.style.is_preview_icon ? '24px' : '0px'}"
                        >
                            <p class="__coupon_name">
                                状态戳位置预览(此开关仅用于预览)
                            </p>
                            <el-switch
                                v-model="controList.style.is_preview_icon"
                                active-color="rgba(32, 160, 255, 1)"
                            />
                        </div>
                        <div
                            v-if="controList.style.is_preview_icon"
                            class="__coupon_config"
                        >
                            <div class="__coupon_color">
                                <p class="__coupon_color_name">
                                    状态戳颜色
                                </p>
                                <div
                                    class="wrap-color"
                                    :style="{marginLeft: 0}"
                                >
                                    <el-color-picker
                                        v-model="controList.style.iconColor"
                                        show-alpha
                                        class="edit-tab-bg"
                                    />
                                    <p
                                        class="wrap-rest"
                                        :style="{marginLeft: '40px'}"
                                        @click="controList.style.iconColor = 'rgba(255,255,255,1)'"
                                    >
                                        重置
                                    </p>
                                </div>
                            </div>
                            <div
                                class="__coupon_slider"
                                :style="{width: '295px'}"
                            >
                                <p class="__coupon_name">尺寸大小</p>
                                <el-slider
                                    v-model="controList.style.iconFontSize"
                                    :min="0"
                                    :max="200"
                                    :step="2"
                                    :style="{flex: 1}"
                                />
                                <p class="__coupon_max">200PX</p>
                            </div>
                            <div
                                class="__coupon_slider"
                                :style="{width: '295px'}"
                            >
                                <p class="__coupon_name">顶部距离</p>
                                <el-slider
                                    v-model="controList.style.iconTop"
                                    :min="0"
                                    :max="375"
                                    :step="2"
                                    :style="{flex: 1}"
                                />
                                <p class="__coupon_max">375PX</p>
                            </div>
                            <div
                                class="__coupon_slider"
                                :style="{width: '295px'}"
                            >
                                <p class="__coupon_name">左边距离</p>
                                <el-slider
                                    v-model="controList.style.iconLeft"
                                    :min="0"
                                    :max="375"
                                    :step="2"
                                    :style="{flex: 1}"
                                />
                                <p class="__coupon_max">375PX</p>
                            </div>
                            <p class="__coupon_remark">
                                备注：此距离是相对于单张优惠券的距离
                            </p>
                        </div>
                        <div
                            class="__coupon_preview"
                            :style="{marginBottom: !controList.style.is_preview_icon ? '24px' : '0px'}"
                        >
                            <p class="__coupon_name">
                                隐藏已抢完以及失效的券
                            </p>
                            <el-switch
                                v-model="controList.data.hide_invalid"
                                active-text="显示"
                                inactive-text="隐藏"
                                active-value="0"
                                inactive-value="1"
                                active-color="rgba(32, 160, 255, 1)"
                                :style="{marginTop: '-5px'}"
                            />
                        </div>
                        <div class="__coupon_radio">
                            <p class="__coupon_name">
                                领取时间
                            </p>
                            <div class="__coupon_list">
                                <el-radio
                                    v-model="controList.style.receive_type"
                                    :label="1"
                                >
                                    上架即可领取
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.receive_type"
                                    :label="2"
                                >
                                    指定时间领取
                                </el-radio>
                            </div>
                        </div>
                        <div class="__coupon_radio">
                            <el-date-picker
                                v-model="controList.style.receive_time"
                                type="datetime"
                                size="medium"
                                placeholder="选择日期时间"
                                :style="{marginLeft: '73px', marginBottom: '24px'}"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 自定义红包组件 -->
            <div
                v-if="type == 107 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">红包</p>
                </div>
                <div class="__coupon">
                    <template v-if="custompacketList.length">
                        <div
                            v-for="(row,i) in custompacketList"
                            :key="i"
                            class="__coupon_items"
                            @mouseenter="sliderIndex = i"
                        >
                            <div class="__coupon_header">
                                <p>红包模块{{ i | filterNumber }}</p>
                                <i
                                    class="iconfont el-icon-hand-close"
                                    @click="handleDeleteData('packet', i)"
                                />
                            </div>
                            <!-- 未选择红包 -->
                            <div
                                class="__coupon_add"
                                @click="$refs.packetSelect.show('custom_packet')"
                                v-if="!row.packet_no"
                            >
                                <i class="iconfont el-icon-hand-iconjia" />
                                添加红包
                            </div>
                            <!-- 已选择红包 -->
                            <div
                                v-if="row.packet_no"
                                class="__coupon_data"
                                @click="$refs.packetSelect.show('custom_packet')"
                            >
                                <p class="__coupon_title">
                                    {{ row.title }}
                                </p>
                                <p
                                    class="__coupon_limit"
                                >
                                    {{ row.discount_info }}
                                </p>
                            </div>
                            <!-- 已上传背景图 -->
                            <template v-if="row.cover_image">
                                <div class="__coupon_img">
                                    <div
                                        class="__coupon_left"
                                        :style="{background: `url(${row.cover_image}) center center`, backgroundSize: 'cover'}"
                                    >
                                        <div
                                            class="__coupon_tc"
                                            v-if="tabFlag && sliderIndex === i"
                                        >
                                            <p>点击替换</p>
                                        </div>
                                        <input
                                            accept="image/*"
                                            type="file"
                                            class="upload_title_image"
                                            @change="tirggerFile($event, 'custom_packet', i)"
                                            @mouseenter="handEnterTab(custompacketList[i].cover_image, i)"
                                            @mouseleave="tabFlag = false"
                                        >
                                    </div>
                                    <img
                                        src="http://cdn.zsdx.cn/student-app/images/delete.png"
                                        class="__coupon_delete"
                                        @click="row.cover_image = ''"
                                    >
                                </div>
                            </template>
                            <!-- 未上传背景图 -->
                            <template v-if="!row.cover_image">
                                <div class="__coupon_change">
                                    <input
                                        accept="image/*"
                                        type="file"
                                        class="upload-title-image"
                                        @change="tirggerFile($event, 'custom_packet', i)"
                                        @mouseenter="handEnterTab(custompacketList[i].cover_image, i)"
                                        @mouseleave="tabFlag = false"
                                    >
                                    <div class="__coupon_img_url">
                                        <i class="iconfont el-icon-hand-iconjia" />
                                        添加红包图片
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                    <div
                        class="__add_coupon"
                        @click="handleAddPacket()"
                    >
                        <i class="iconfont el-icon-hand-iconjia" />
                        添加红包模块{{ custompacketList.length }}/9
                    </div>
                    <div class="__coupon_lines" />
                    <div class="__coupon_set">
                        <p class="__coupon_set_title">
                            排列样式设置
                        </p>
                        <div class="__coupon_color">
                            <p class="__coupon_color_name">
                                背景颜色
                            </p>
                            <div
                                class="wrap-color"
                                :style="{marginLeft: 0}"
                            >
                                <el-color-picker
                                    v-model="controList.style.backgroundColor"
                                    show-alpha
                                    class="edit-tab-bg"
                                />
                                <p
                                    class="wrap-rest"
                                    :style="{marginLeft: '40px'}"
                                    @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                                >
                                    重置
                                </p>
                            </div>
                        </div>
                        <div class="__coupon_slider">
                            <p class="__coupon_name">上下边距</p>
                            <el-slider
                                v-model="controList.style.marginV"
                                :min="0"
                                :max="50"
                                :step="2"
                                :style="{flex: 1}"
                            />
                            <p class="__coupon_max">50PX</p>
                        </div>
                        <div class="__coupon_slider">
                            <p class="__coupon_name">左右边距</p>
                            <el-slider
                                v-model="controList.style.marginH"
                                :min="0"
                                :max="50"
                                :step="2"
                                :style="{flex: 1}"
                            />
                            <p class="__coupon_max">50PX</p>
                        </div>
                        <div class="__coupon_radio">
                            <p class="__coupon_name">
                                排列样式
                            </p>
                            <div class="__coupon_list">
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="0"
                                >
                                    大图模式
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="1"
                                >
                                    一行两个
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="2"
                                >
                                    一行三个
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="3"
                                    :style="{marginTop: '12px'}"
                                >
                                    一行四个
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.coupon_array"
                                    :label="4"
                                    :style="{marginTop: '12px'}"
                                >
                                    横向滑动
                                </el-radio>
                            </div>
                        </div>
                        <div
                            v-if="controList.style.coupon_array === 4"
                            class="__coupon_width"
                        >
                            <el-input
                                v-model="controList.style.coupon_width"
                                placeholder="请输入单张红包的宽度"
                                size="medium"
                                :style="{width: '256px', marginLeft: '71px'}"
                                oninput="value = value.replace(/[^\d]/g,'')"
                            />
                            <p class="__coupon_px">px</p>
                        </div>
                        <div
                            class="__coupon_preview"
                            :style="{marginBottom: !controList.style.is_preview_icon ? '24px' : '0px'}"
                        >
                            <p class="__coupon_name">
                                状态戳位置预览(此开关仅用于预览)
                            </p>
                            <el-switch
                                v-model="controList.style.is_preview_icon"
                                active-color="rgba(32, 160, 255, 1)"
                            />
                        </div>
                        <div
                            v-if="controList.style.is_preview_icon"
                            class="__coupon_config"
                        >
                            <div class="__coupon_color">
                                <p class="__coupon_color_name">
                                    状态戳颜色
                                </p>
                                <div
                                    class="wrap-color"
                                    :style="{marginLeft: 0}"
                                >
                                    <el-color-picker
                                        v-model="controList.style.iconColor"
                                        show-alpha
                                        class="edit-tab-bg"
                                    />
                                    <p
                                        class="wrap-rest"
                                        :style="{marginLeft: '40px'}"
                                        @click="controList.style.iconColor = 'rgba(255,255,255,1)'"
                                    >
                                        重置
                                    </p>
                                </div>
                            </div>
                            <div
                                class="__coupon_slider"
                                :style="{width: '295px'}"
                            >
                                <p class="__coupon_name">尺寸大小</p>
                                <el-slider
                                    v-model="controList.style.iconFontSize"
                                    :min="0"
                                    :max="200"
                                    :step="2"
                                    :style="{flex: 1}"
                                />
                                <p class="__coupon_max">200PX</p>
                            </div>
                            <div
                                class="__coupon_slider"
                                :style="{width: '295px'}"
                            >
                                <p class="__coupon_name">顶部距离</p>
                                <el-slider
                                    v-model="controList.style.iconTop"
                                    :min="0"
                                    :max="375"
                                    :step="2"
                                    :style="{flex: 1}"
                                />
                                <p class="__coupon_max">375PX</p>
                            </div>
                            <div
                                class="__coupon_slider"
                                :style="{width: '295px'}"
                            >
                                <p class="__coupon_name">左边距离</p>
                                <el-slider
                                    v-model="controList.style.iconLeft"
                                    :min="0"
                                    :max="375"
                                    :step="2"
                                    :style="{flex: 1}"
                                />
                                <p class="__coupon_max">375PX</p>
                            </div>
                            <p class="__coupon_remark">
                                备注：此距离是相对于单张红包的距离
                            </p>
                        </div>
                        <div
                            class="__coupon_preview"
                            :style="{marginBottom: !controList.style.is_preview_icon ? '24px' : '0px'}"
                        >
                            <p class="__coupon_name">
                                隐藏已抢完以及失效的红包
                            </p>
                            <el-switch
                                v-model="controList.data.hide_invalid"
                                active-text="显示"
                                inactive-text="隐藏"
                                active-value="0"
                                inactive-value="1"
                                active-color="rgba(32, 160, 255, 1)"
                                :style="{marginTop: '-5px'}"
                            />
                        </div>
                        <div class="__coupon_radio">
                            <p class="__coupon_name">
                                领取时间
                            </p>
                            <div class="__coupon_list">
                                <el-radio
                                    v-model="controList.style.receive_type"
                                    :label="1"
                                >
                                    上架即可领取
                                </el-radio>
                                <el-radio
                                    v-model="controList.style.receive_type"
                                    :label="2"
                                >
                                    指定时间领取
                                </el-radio>
                            </div>
                        </div>
                        <div class="__coupon_radio">
                            <el-date-picker
                                v-model="controList.style.receive_time"
                                type="datetime"
                                size="medium"
                                placeholder="选择日期时间"
                                :style="{marginLeft: '73px', marginBottom: '24px'}"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分享按钮 -->
            <div
                v-if="type == 11 && JSON.stringify(controList) !== '{}'"
                class="edit-wrap"
            >
                <div class="edit-title">
                    <p class="edit-title-text">分享按钮</p>
                </div>
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                >
                    <p class="name">按钮图片</p>
                    <p class="name-desc">建议图片宽度≤750px，高度≤950px，支持png、jpg、gif</p>
                    <div class="wrap-side">
                        <div
                            class="side-list"
                            v-if="!controList.data.button_image"
                        >
                            <i class="iconfont el-icon-hand-iconjia"/>
                            <p class="side-text">添加图片</p>
                        </div>
                        <div
                            class="side-content"
                            v-if="controList.data.button_image"
                        >
                            <div
                                :style="{backgroundImage: `url(${controList.data.button_image})`, backgroundSize: 'cover'}"
                                class="side-content-image"
                            />
                            <i
                                class="iconfont el-icon-hand-shanchu1"
                                @click="controList.data.button_image = ''"
                            />
                        </div>
                        <input
                            accept="image/*"
                            type="file"
                            class="upload-title-image"
                            @change="tirggerFile($event, 'share_button')"
                            @mouseenter="handEnterTab(controList.data.button_image)"
                            @mouseleave="tabFlag = false"
                        >
                        <div
                            class="upload-title-hover"
                            v-if="tabFlag"
                        >
                            <p class="title-hover">点击替换</p>
                        </div>
                    </div>
                </div>
                <!-- 分享素材 -->
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start'}"
                >
                    <p class="name">分享素材</p>
                    <div class="__share_button">
                        <div class="__share_list">
                            <p class="__share_title">分享标题</p>
                            <el-input
                                type="textarea"
                                placeholder="请输入分享标题"
                                v-model="controList.data.title"
                                maxlength="30"
                                show-word-limit
                                :autosize="{ minRows: 3, maxRows: 3}"
                            />
                        </div>
                        <div
                            class="__share_list"
                            :style="{marginTop: '16px'}"
                        >
                            <p class="__share_title">分享内容</p>
                            <el-input
                                type="textarea"
                                placeholder="请输入分享内容"
                                v-model="controList.data.desc"
                                maxlength="30"
                                show-word-limit
                                :autosize="{ minRows: 3, maxRows: 3}"
                            />
                        </div>
                        <div
                            class="wrap-list left"
                            :style="{marginTop: '16px'}"
                        >
                            <p class="names">分享图片</p>
                            <div class="upload uploadControl">

                                <div class="upload-wrap">
                                    <i
                                        v-if="!controList.data.image"
                                        class="iconfont el-icon-hand-iconjia"
                                    />
                                    <p
                                        v-if="!controList.data.image"
                                        class="upload-text"
                                    >上传图片</p>
                                    <input
                                        accept="image/*"
                                        type="file"
                                        class="upload-good-image"
                                        @change="tirggerFile($event, 'share_logo')"
                                    >
                                    <img
                                        v-if="controList.data.image"
                                        :src="controList.data.image"
                                        class="upload-image"
                                    >
                                </div>
                                <p class="upload-desc">
                                    图片尺寸90*90px
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="wrap-list"
                    :style="{flexDirection: 'column', alignItems: 'flex-start',marginBottom: '14px'}"
                >
                    <p class="name">分享跳转链接</p>
                    <!-- <app-action
                        v-if="initAction"
                        @action="getAction"
                        :show="false"
                        :action="JSON.stringify(controList.data.action.app_action || {})"
                        :style="{marginLeft: '0px', marginTop: '10px', pointerEvents: !controList.data.button_image ? 'none' : ''}"
                    /> -->
                    <el-input
                        v-model="controList.data.url"
                        placeholder="请输入分享链接"
                        size="small"
                        :style="{width: '320px',margin: '16px 0'}"
                    />
                </div>
                <div
                    class="__coupon_radio"
                    :style="{marginLeft: '24px', display: 'flex', alignItems: 'center', marginBottom: '20px'}"
                >
                    <p
                        class="__coupon_name requires"
                        :style="{color: '#333333'}"
                    >
                        分享口令
                    </p>
                    <div
                        class="__coupon_list"
                        :style="{marginLeft: '24px'}"
                    >
                        <el-radio
                            v-model="controList.style.share_pwd"
                            :label="1"
                        >
                            开启
                        </el-radio>
                        <el-radio
                            v-model="controList.style.share_pwd"
                            :label="0"
                        >
                            关闭
                        </el-radio>
                    </div>
                </div>
                <div :style="{width: '375px', height: '1px', border: '1px dashed #F0F2F7', marginBottom: '24px'}" />
                <p :style="{ color: 'rgba(51, 51, 51, 1)', fontSize: '14px', marginLeft: '20px', fontWeight: 500, marginBottom: '10px'}">按钮位置</p>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '0px'}"
                >
                    <template v-if="controList.style.buttonFixed === 1">
                        <p class="name">{{ controList.style.buttonFixed === 1 ? '上下边距' : '距离底部' }}</p>
                        <el-slider
                            v-model="controList.style.mH"
                            :min="0"
                            :max="750"
                            :step="2"
                            :disabled="!controList.data.button_image"
                            :style="{width: '190px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">750PX</p>
                    </template>
                    <template v-if="controList.style.buttonFixed === 2">
                        <p class="name">{{ controList.style.buttonFixed === 1 ? '上下边距' : '距离底部' }}</p>
                        <el-slider
                            v-model="controList.style.Top"
                            :min="0"
                            :max="750"
                            :step="2"
                            :disabled="!controList.data.button_image"
                            :style="{width: '190px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">750PX</p>
                    </template>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '11px'}"
                >
                    <template v-if="controList.style.buttonFixed === 1">
                        <p class="name">{{ controList.style.buttonFixed === 1 ? '左右边距' : '距离左边' }}</p>
                        <el-slider
                            v-model="controList.style.mV"
                            :min="0"
                            :max="750"
                            :step="2"
                            :disabled="!controList.data.button_image"
                            :style="{width: '190px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">750PX</p>
                    </template>
                    <template v-if="controList.style.buttonFixed === 2">
                        <p class="name">{{ controList.style.buttonFixed === 1 ? '左右边距' : '距离左边' }}</p>
                        <el-slider
                            v-model="controList.style.Left"
                            :min="0"
                            :max="750"
                            :step="2"
                            :disabled="!controList.data.button_image"
                            :style="{width: '190px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">750PX</p>
                    </template>
                </div>
                <div
                    class="__coupon_radio"
                    :style="{marginLeft: '24px', display: 'flex', alignItems: 'center'}"
                >
                    <p
                        class="__coupon_names"
                        :style="{color: '#333333'}"
                    >
                        位置样式
                    </p>
                    <div
                        class="__coupon_list"
                        :style="{marginLeft: '24px'}"
                    >
                        <el-radio
                            v-model="controList.style.buttonFixed"
                            :label="1"
                            @change="handleChangeFixed(1, controList.style)"
                        >
                            非固定
                        </el-radio>
                        <el-radio
                            v-model="controList.style.buttonFixed"
                            :label="2"
                            @change="handleChangeFixed(2, controList.style)"
                        >
                            悬浮固定
                        </el-radio>
                    </div>
                </div>
                <div
                    class="wrap-list"
                    :style="{marginTop: '30px'}"
                >
                    <p class="name">控件圆角值</p>
                </div>
                <div class="wrap-list">
                    <div class="rate-main">
                        <div class="rate-main-ipt">
                            <img
                                src="@/assets/image/rate-main.png"
                                class="rate-wrap-bg"
                            >
                            <div class="rate-main-content">
                                <el-input
                                    v-for="(option,index) in 4"
                                    :key="index"
                                    v-model="rate[index]"
                                    size="mini"
                                    @input="changeRate('single')"
                                    :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                />
                            </div>
                        </div>
                        <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                            输入数值设置四个角
                        </p>
                    </div>
                </div>
            </div>
        </template>

        <!-- 选择优惠券 -->
        <coupon-select
            ref="couponSelect"
            @emit="emitCouponData"
        />

        <!-- 选择红包 -->
        <packet-select
            ref="packetSelect"
            @emit="emitPacketData"
        />

        <!-- 选择商品(自定义商品) -->
        <goods-select
            ref="goodsSelect"
            @change="handleSelectGoods"
        />

        <!-- 清空商品弹窗(自定义商品) -->
        <clear-dialog
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'确认清空全部商品?'"
            :content="'清空后已选择的商品将被清除，需重新添加商品'"
            ref="clearDialog"
            @confrim="confirmClear"
        />

        <!-- 选择商品(社区专享) -->
        <goods-select-common
            ref="goodsSelect2"
            @change="handleSelectGoodsCommon"
        />

        <!-- 清空商品弹窗(社区专享) -->
        <clear-dialog
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'确认清空全部商品?'"
            :content="'清空后已选择的商品将被清除，需重新添加商品'"
            ref="clearDialog2"
            @confrim="confirmClearCommon"
        />
    </div>
</template>

<script>
import appAction from '@/components/active/app-action.vue';
import couponSelect from '@/components/coupon/coupon-select.vue';
import packetSelect from '@/components/coupon/packet-select.vue';
import goodsSelect from '@/components/goods/goods-select.vue';
import clearDialog from '@/components/dialog/index.vue';
import goodsSelectCommon from '@/components/new-people/goods-select-common.vue';
import clearDialogCommon from '@/components/dialog/index.vue';
import draggable from 'vuedraggable';
export default {
    name: 'Edit',
    components: {
        appAction,
        couponSelect,
        goodsSelect,
        clearDialog,
        draggable,
        packetSelect,
        goodsSelectCommon,
        clearDialogCommon
    },
    props: {
        // 0: 基础配置
        type: {
            type: Number,
            default: () => {}
        },
        //页面总数据配置
        config: {
            type: Object,
            default: () => {}
        },
        //组件数据配置
        list: {
            type: Array,
            default: () => {}
        },
        id: {
            type: Number,
            default: () => {}
        },
        //删除组件通知
        message: {
            type: String,
            default: () => {}
        },
        //新增组件通知
        add: {
            type: String,
            default: () => {}
        },
        //监听top值变化
        top: {
            type: Number,
            default: () => {}
        }
    },
    watch: {
        //监听基本配置数据修改
        dataList: {
            handler: function (val, oldVal) {
                this.$emit('change', this.dataList);
                // console.log('修改后的数据:' + JSON.stringify(val));
            },
            deep: true
        },
        //监听组件类型变化
        type (value) {
            this.pageH = 'auto';
            this.$nextTick(()=>{
                this.type = value;
                this.init();
                // setTimeout(() => {
                //     this.pageH = document.querySelector('.edit-wrap').getClientRects()[0].height;
                //     console.log('--pageH--', this.pageH);
                // }, 100);
            });
        },
        //监听点击组件，获取组件位置，确定编辑区域数据展示切换
        id (value) {
            this.loading = true;
            this.showEdit = true;
            this.initAction = false;

            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.initAction = true;
                    //回填自定义商品数据
                    if(this.list[this.id] === undefined) return false;
                    if(this.list[this.id]['type'] == 103) {
                        this.setShopList();
                    }
                    if(this.list[this.id]['type'] == 105) {
                        this.setShopListCommon();
                    }
                    if(this.list[this.id]['type'] == 106) {
                        this.getCustomCouponList(this.controList);
                    }
                    if(this.list[this.id]['type'] == 107) {
                        this.getCustompacketList(this.controList);
                    }
                },100);
                this.init();
                setTimeout(()=>{
                    this.loading = false;
                },300);

            });
        },
        //监听组件数据改变
        controList: {
            handler: function (val, oldVal) {
                // 判断当前轮播组件是否上传图片
                if(val.type == 3 || val.type == 2) {
                    let num = 0;

                    val.data.images.forEach(option => {
                        if(option.image_url) {
                            this.controList.status = true;
                        } else {
                            num++;
                        }
                    });

                    if(num == val.data.images.length) {
                        this.controList.status = false;
                    } else {
                        this.getImageHeight(val.data.images);
                    }
                }
                if(Number(this.type == Number(val.type))) {//十分重要，切换组件数据时会触发监听，需数据修改后向上传递
                    this.$emit('changeList', {
                        list: this.controList,
                        id: this.id
                    });
                }
                this.getSetRate(this.type);
                // console.log('修改后的数据llll:' + this.type, val.type, JSON.stringify(val));
            },
            deep: true
        },
        //接收删除通知，数据清空
        message (val) {
            // console.log('delete');
            this.showEdit = false;
            this.$notify({
                title: '提示',
                message: '删除成功',
                type: 'success',
                duration: 2000
            });
        },
        //添加组件执行
        add (val) {
            // console.log('add', val);
            this.loading = true;
            this.$nextTick(()=>{
                this.init();
                setTimeout(()=>{
                    this.loading = false;
                },300);
                if(this.list[this.id] === undefined) return false;
                if(this.list[this.id]['type'] == 103) {
                    this.setShopList();
                }
                if(this.list[this.id]['type'] == 105) {
                    this.setShopListCommon();
                }
            });
        },
        couponList: {
            handler: function (val, oldVal) {
                this.$store.commit('config/SET_COUPON_LIST', val);
            },
            deep: true
        },
        changeCustonData: {
            handler: function (val, oldVal) {
                const nos = val.reduce((cur,next) => {
                    cur.push(next.goods_no);
                    return cur;
                },[]);

                this.$set(this.controList.data, 'goods_nos', nos);
            },
            deep: true
        },
        changeCommonData: {
            handler: function (val, oldVal) {
                const nos = val.reduce((cur,next) => {
                    cur.push(next.gg_no);
                    return cur;
                },[]);

                // console.log('@@nos@@', nos);

                this.$set(this.controList.data, 'gg_nos', nos);
            },
            deep: true
        }
    },
    filters: {
        filterNumber (val) {
            if(val == 0) {
                return '一';
            } else if (val == 1) {
                return '二';
            } else if (val == 2) {
                return '三';
            } else if (val == 3) {
                return '四';
            } else if (val == 4) {
                return '五';
            } else if (val == 5) {
                return '六';
            } else if (val == 6) {
                return '七';
            } else if (val == 7) {
                return '八';
            } else if (val == 8) {
                return '九';
            }
        }
    },
    data () {
        return {
            dataList: {},//拷贝基本配置数据
            row: {},//当前编辑区域数据
            tabFlag: false,//自定义标题hove
            controList: {},//拷贝当前组件数据
            initAction: true,//初始化跳转链接组件
            rate: [0,0,0,0],//单列图片圆角
            rateFlag: false,//单列图片圆角状态
            typeList: [],//商品组数据列表
            sliderIndex: -1,//记录轮播鼠标移入状态
            showEdit: true,//编辑区是否关闭，用于删除组件后调用
            loading: false,//加载loading，
            changeCustonData: [],//自定义商品选择商品数据源
            changeCustonDataCopy: [],
            couponList: [],//优惠券列表用于渲染数据，不提交
            checkCoupon: true,//查询一次优惠券
            changeCommonData: [],//社群专享商品选择商品数据源
            changeCommonDataCopy: [],//社群商品复制拷贝
            customCouponList: [],//自定义优惠券数据
            custompacketList: [],//自定义红包数据
            pageH: 'auto',//编辑区域高度
        };
    },
    mounted () {
        this.$nextTick(()=>{
            this.init();

            //获取商品组数据
            this.$post('/student/shop_goods_cate%5Cget_list_select', {}, resp => {
                if(resp.code == 1){
                    this.typeList = resp.data.list;
                }
            });
            // console.log('当前展示组件编辑为:' + this.type);
            // console.log('当前组件列表数据:' + this.id, this.list);
        });
    },
    methods: {
        /**
         * @description 初始化编辑区
         */
        init () {
            setTimeout(()=>{
                switch (this.type) {
                    case 0:
                        this.dataList = JSON.parse(JSON.stringify(this.config));
                        this.row = this.dataList.base_config;
                        break;
                    case 1:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化单列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 0,
                                marginH: 0,
                                backgroundColor: 'rgba(255,255,255,1)',
                                borderRadius: '0rpx 0rpx 0rpx 0rpx'
                            };
                        }
                        break;
                    case 101:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化商品组样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                fixHeader: 1,//是否固定分组菜单
                                headerActiveBackgroundColor: '#F95B56',//按钮颜色
                                headerBackgroundColor: 'rgba(255, 255, 255, 1)',//分组菜单背景色
                                headerActiveColor: 'rgba(255, 255, 255, 1)',//分组按钮活动状态文字颜色
                                headerColor: 'rgba(0, 0, 0, 1)',//分组文字颜色
                                headerBackgroundImage: '',//分组标题背景图
                                pageMargin: 24,//页面边距
                                goodsMargin: 24,//商品边距
                                columns: 3,//商品展示列数
                                //按钮
                                goodsButton: {
                                    show: 1,//显示
                                    text: '立即购买',//按钮文案
                                    backgroundColor: '#F95B56'//按钮背景色
                                },
                                //角标
                                goodsTag: {
                                    show: 1,//显示
                                    type: 0,//0:热门 1:新品 2:自定义
                                    width: 60,
                                    height: 60,
                                    left: 30,//左边距
                                    top: 0,//上边距
                                    url: 'http://cdn.zsdx.cn/student-app/images/cate-hot.png'//角标链接
                                },
                                goodsBorderRadius: '10rpx 10rpx 0 0',//商品圆角rpx
                                backgroundColor: '#F8F8F8',//模块背景色
                                mBottom: 0//模块下边距
                            };
                        }
                        break;
                    case 2:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化单列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                columns: 2,
                                marginV: 24,//上下
                                marginH: 24,//左右
                                backgroundColor: 'rgba(255,255,255,1)',
                                borderRadius: '0rpx 0rpx 0rpx 0rpx'
                            };
                        }
                        break;
                    case 3:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化单列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                borderRadius: '0rpx 0rpx 0rpx 0rpx'
                            };
                        }
                        break;
                    case 4:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化辅助空白样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                height: 40,
                                backgroundColor: 'rgba(255,255,255,1)'
                            };
                        }
                        break;
                    case 5:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化辅助线样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 20,
                                backgroundColor: 'rgba(255,255,255,1)',
                                style: 'solid',
                                color: 'rgba(0,0,0,1)',
                                height: 2
                            };
                        }
                        break;
                    case 103:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化商品组样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                pageMargin: 24,//页面边距
                                goodsMargin: 24,//商品边距
                                columns: 3,//商品展示列数
                                //按钮
                                goodsButton: {
                                    show: 1,//显示
                                    text: '立即购买',//按钮文案
                                    backgroundColor: '#F95B56'//按钮背景色
                                },
                                //角标
                                goodsTag: {
                                    show: 1,//显示
                                    type: 0,//0:热门 1:新品 2:自定义
                                    width: 60,
                                    height: 60,
                                    left: 30,//左边距
                                    top: 0,//上边距
                                    url: 'http://cdn.zsdx.cn/student-app/images/cate-hot.png'//角标链接
                                },
                                goodsBorderRadius: '10rpx 10rpx 0 0',//商品圆角rpx
                                backgroundColor: '#F8F8F8'//模块背景色
                            };
                        }
                        break;
                    case 6:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化辅助线样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                type: 0, //0:按小时 1:按天
                                time_style: 0, //0:样式1 1:样式2
                                text_color: 'rgba(0,0,0,1)',//中文颜色
                                number_color: 'rgba(255,255,255,1)',//数字颜色
                                background_type: 0,//0:纯色背景 1: 图片背景
                                backgroundColor: 'rgba(255,255,255,1)',//纯色背景 仅background_type=0
                                backgroundImage: '',//图片背景 仅background_type=1
                                marginV: 10,//上下边距
                                marginH: 10//左右边距
                            };
                        }
                        setTimeout(() => {
                            this.controList.data= {
                                start_time: new Date().getTime(),//开始时间
                                end_time: new Date().getTime() + 24 * 60 * 60 * 1000 * 2,//结束时间
                                type: 1 //倒计时类型,0:按小时,1:按天
                            };
                        },200);
                        break;
                    case 105:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化商品组样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                // is_shopping_cart: 1,
                                pageMargin: 24,//页面边距
                                goodsMargin: 24,//商品边距
                                columns: 3,//商品展示列数
                                //按钮
                                goodsButton: {
                                    show: 1,//显示
                                    text: '立即购买',//按钮文案
                                    backgroundColor: '#F95B56'//按钮背景色
                                },
                                //角标
                                goodsTag: {
                                    show: 1,//显示
                                    type: 0,//0:热门 1:新品 2:自定义
                                    width: 60,
                                    height: 60,
                                    left: 30,//左边距
                                    top: 0,//上边距
                                    url: 'http://cdn.zsdx.cn/student-app/images/cate-hot.png'//角标链接
                                },
                                goodsBorderRadius: '10rpx 10rpx 0 0',//商品圆角rpx
                                backgroundColor: '#F8F8F8'//模块背景色
                            };
                        }
                        break;
                    case 106:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));
                        this.customCouponList = [];

                        //无数据时初始化商品组样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 10,//上下边距
                                marginH: 10,//左右边距
                                coupon_array: 0,//0:大图模式 1:一行两个 2:一行三个 3:一行四个 4:横向滑动
                                is_preview_icon: false,//false:关闭 true:打开
                                iconColor: 'rgba(255,255,255,1)',//icon图标颜色
                                iconFontSize: 60,//icon尺寸大小
                                iconTop: 20,//icon顶部距离
                                iconLeft: 20,//icon左边距离
                                coupon_width: 200,//仅coupon_array=4时生效
                                backgroundColor: 'rgba(255,255,255,1)',
                                receive_type: 1,//1:上架可领取 2:指定时间领取
                                receive_time: '',//领取时间 （仅receive_type=2）
                            };
                        }
                        break;
                    case 107:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));
                        this.custompacketList = [];

                        //无数据时初始化商品组样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 10,//上下边距
                                marginH: 10,//左右边距
                                coupon_array: 0,//0:大图模式 1:一行两个 2:一行三个 3:一行四个 4:横向滑动
                                is_preview_icon: false,//false:关闭 true:打开
                                iconColor: 'rgba(255,255,255,1)',//icon图标颜色
                                iconFontSize: 60,//icon尺寸大小
                                iconTop: 20,//icon顶部距离
                                iconLeft: 20,//icon左边距离
                                coupon_width: 200,//仅coupon_array=4时生效
                                backgroundColor: 'rgba(255,255,255,1)',
                                receive_type: 1,//1:上架可领取 2:指定时间领取
                                receive_time: '',//领取时间 （仅receive_type=2）
                            };
                        }
                        break;
                    case 11:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));
                        this.custompacketList = [];

                        //无数据时初始化商品组样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                mH: 20,
                                mV: 20,
                                Top: 280,//上下边距
                                Left: 24,//左右边距
                                buttonFixed: 1,//1:非固定 2:悬浮固定
                                borderRadius: '30rpx 30rpx 30px 30px',//商品圆角rpx
                            };
                        }

                        // setTimeout(() => {
                        //     this.$set(this.controList.style, 'buttonFixed', 1);
                        // }, 100000);
                        break;
                    default:
                        break;
                }
            },60);
        },

        /**
         * @description 切换标题类型改变配置参数
         */
        changeTitle (type) {
            if(type == 2) {
                this.$set(this.row, 'title_background', 'rgba(255,255,255,1)');
            }
        },

        /**
         * @description 上传图片
         * @type  logo tab
         */
        tirggerFile (event, type, index) {

            let file = event.target.files[0];
            let form = new FormData();

            // console.log('file', file);

            const isLt02M = file.size / 1024 / 1024 > 0.2;
            const isLt01M = file.size / 1024 / 1024 > 0.1;

            if(isLt02M && (type == 'custom_coupon' || type == 'custom_packet')) {
                this.$notify({
                    title: '提示',
                    message: '图片大小不能超过200kb',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(isLt01M && (type == 'share_logo')) {
                this.$notify({
                    title: '提示',
                    message: '图片大小不能超过100kb',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            form.append("file", file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: form,
                success: resp => {
                    event.target.value = null;
                    if (resp.code == 1) {
                        if(type == 'logo') {
                            this.row.share_config.image = resp.data.url;
                        } else if (type == 'tab') {
                            this.row.title_image = resp.data.url;
                        } else if (type == 'single') {
                            this.controList.data.image_url = resp.data.url;
                        } else if (type == 'cate') {
                            this.controList.style.headerBackgroundImage = resp.data.url;
                        } else if (type == 'tag') {
                            this.controList.style.goodsTag.url = resp.data.url;
                        } else if (type == 'slider') {
                            this.controList.data.images[index].image_url = resp.data.url;
                        } else if (type == 'button') {
                            this.row.button_image = resp.data.url;
                        } else if (type == 'countDown') {
                            this.controList.style.backgroundImage = resp.data.url;
                        } else if (type == 'custom_coupon') {
                            this.customCouponList[index].cover_image = resp.data.url;
                            this.controList.data.coupon_list[index].cover_image = resp.data.url;
                        } else if (type == 'custom_packet') {
                            this.custompacketList[index].cover_image = resp.data.url;
                            this.controList.data.packet_list[index].cover_image = resp.data.url;
                        } else if (type == 'share_button') {
                            this.controList.data.button_image = resp.data.url;
                        } else if (type == 'share_logo') {
                            this.controList.data.image = resp.data.url;
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },

        /**
         * @description 获取图片高度
         */
        getImageHeight (imageList) {
            // console.log('imageList', imageList);
            let listH = [];
            let listW = [];
            let url = imageList.reduce((cur,next) => {
                if(next.image_url) {
                    cur.push(next.image_url);
                }
                return cur;
            },[]);

            for(let key =0; key<url.length; key++) {
                let img = document.createElement('img');

                img.src = url[key];
                img.style.position = "absolute";
                img.style.visibility = 'hidden';
                document.getElementById('box').appendChild(img);

                this.$nextTick(()=>{//防止渲染后不能及时获取宽高
                    setTimeout(()=>{
                        let image = document.getElementById('box').children[document.getElementById('box').children.length - 1];

                        listH.push(image.offsetHeight);
                        listW.push(image.offsetWidth);
                    },200);
                });
            }

            setTimeout(()=>{
                let maxH = Math.max(...listH);
                let maxW = Math.max(...listW);
                let list = this.controList.style;

                this.$set(list, 'height', parseInt(maxH * (750 / maxW)));
            },400);
        },

        /**
         * @description 显示替换图片图层
         */
        handEnterTab (value, index) {
            this.sliderIndex = index;
            if(!value) return false;
            if(value) this.tabFlag = true;
        },

        /**
         * @description 获取app_action 单列图片
         */
        getAction (action) {
            let appAction = JSON.parse(action);

            let actions = this.controList.data.action;

            this.$set(actions, 'app_action', appAction);
        },

        /**
         * @description 获取app_action 轮播
         */
        getActionSlider (action) {
            let appAction = JSON.parse(action);

            this.controList.data.images[this.sliderIndex].action.app_action = appAction;
        },

        /**
         * @description 数据回填
         */
        getSetRate (type) {
            if(JSON.stringify(this.controList.style) !== '{}') {
                let radius = '';
                let list = [];

                if((type == 1 || type == 3 || type == 2 || type == 11) && !!this.controList.style.borderRadius) {
                    radius = this.controList.style.borderRadius;
                }
                if((type == 101 || type == 103 || type == 105) && !!this.controList.style.goodsBorderRadius) {
                    radius = this.controList.style.goodsBorderRadius;
                }

                radius.split(' ').forEach(option => {
                    list.push(Number(option.replace(/rpx/g, '')));
                });

                this.rate = list;
                this.rateFlag = !this.rateFlag;
            }
        },

        /**
         * @description 设置圆角
         */
        changeRate (type) {
            let rate = '';

            this.rate = this.rate.slice(0,4);
            this.rate.forEach(option => {
                rate += Number(option) + 'rpx ';
            });

            if(type == 'single' || type == 'slider' || type == 'multi') {
                this.controList.style.borderRadius = rate;
            } else if(type == 'cate') {
                this.controList.style.goodsBorderRadius = rate;
            } else if (type == 'custom') {
                this.controList.style.goodsBorderRadius = rate;
            }
        },

        /**
         * @description 批量设置圆角值
         */
        setRateValue (type) {
            let rate = '';
            let list = [];

            this.rate.forEach(option => {
                let num = '';

                if(type == 'down') {
                    num = option - 1 >= 0 ? option - 1 : 0;
                }
                if(type == 'up') {
                    num = Number(option) + 1;
                }
                list.push(num);
            });

            list = list.slice(0,4);
            list.forEach(option => {
                rate += option + 'rpx ';
            });
            this.rate = list;
            this.controList.style.borderRadius = rate;

        },

        /**
         * @description 获取商品分组数据列表
         */
        getCateList () {
            this.$post('/student/custom_page%5Cget_data_for_app_show', {
                type: 101,
                data_json: JSON.stringify({
                    goods_cate_no: this.controList.data.goods_cate_no,
                    sort: this.controList.data.sort
                })
            }, resp => {
                if(resp.code == 1){
                    this.$set(this.controList, 'list',resp.data.data.category_list);
                    // this.controList.list = resp.data.data.category_list;
                    // this.$store.commit('active/SET_LIST', resp.data.data.category_list);
                }
            });
        },

        /**
         * @description 设置商品角标
         *  type 0:热门 1:新品 2:自定义 -1:隐藏
         */
        setShopTag (type) {
            if(type == -1 || type == 2) {
                this.controList.style.goodsTag.url = '';
            } else if (type == 0) {
                this.controList.style.goodsTag.url = 'http://cdn.zsdx.cn/student-app/images/cate-hot.png';
            } else if (type == 1) {
                this.controList.style.goodsTag.url = 'http://cdn.zsdx.cn/student-app/images/cate-new.png';
            }
        },

        /**
         * @description 添加轮播图/多图
         */
        addSlider (length) {
            if(this.controList.data.images.length == length) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以添加4个',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.controList.data.images.push({
                image_url: '',
                action: {
                    type: 1,
                    app_action: {}
                }
            });
        },

        /**
         * @description 删除轮播图/多图
         */
        deleteSlider (index) {
            if(this.controList.data.images.length == 1) {
                this.$notify({
                    title: '提示',
                    message: '至少保留一个',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.controList.data.images.splice(index, 1);
        },

        /**
         * @deprecated 自定义商品排序
         *  type 1:按数组顺序,2:销量高到低,3:价格低到高,4:价格高到低
         */
        sortCustomList (type) {
            let list = this.controList.data.goods_nos;

            if(!list.length) {
                this.$notify({
                    title: '提示',
                    message: '请先添加商品',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$store.commit('config/SET_CUSTOM_SORT', type);
            setTimeout(() => {
                this.$nextTick(() => {
                    this.watchDraggable();
                });
            },150);
        },

        /**
         * @deprecated 获取选择优惠券数据
         */
        emitCouponData (data) {
            // console.log('----选择优惠券----', data);

            this.$refs.couponSelect.close();
            switch (data.type) {
                case 'share_config':
                    this.row.share_config['share_award']['coupon_no'] = data.list[0]['coupon_no'];
                    break;
                case 'coupon_nos':
                    if(this.couponList.length === 10) {
                        this.$notify({
                            title: '提示',
                            message: '优惠券最多只可以添加10个',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    this.couponList = this.couponList.concat(data.list);
                    this.controList.data.coupon_nos.push(
                        data.list[0]['coupon_no']
                    );
                case 'custom_coupon':
                    this.$set(this.customCouponList[this.sliderIndex], 'coupon_no', data.list[0].coupon_no);
                    this.$set(this.customCouponList[this.sliderIndex], 'title', data.list[0].title);
                    this.$set(this.customCouponList[this.sliderIndex], 'discount_info', data.list[0].discount_info);

                    this.$set(this.controList.data.coupon_list[this.sliderIndex], 'coupon_no', data.list[0].coupon_no);
                    // this.$set(this.controList.data.coupon_list[this.sliderIndex], 'title', data.list[0].title);
                    // this.$set(this.controList.data.coupon_list[this.sliderIndex], 'discount_info', data.list[0].discount_info);
                default:
                    break;
            }
        },

        updateCouponList () {
            const nos = this.couponList.reduce((cur,next) => {
                cur.push(next.coupon_no);
                return cur;
            },[]);

            this.controList.data.coupon_nos = nos;
        },

        /**
         * @deprecated 获取优惠券数据
         */
        getCouponShowData (row) {
            this.$post('/student/custom_page%5Cget_data_for_app_show', {
                type: 102,
                data_json: JSON.stringify({
                    coupon_nos: row.data.coupon_nos,
                    hide_invalid: 0
                })
            }, resp => {
                if(resp.code == 1){
                    this.checkCoupon = false;
                    this.couponList = resp.data.data.coupon_list;
                    this.controList.data.coupon_nos = row.data.coupon_nos;
                }
            });
        },

        /**
         * @deprecated 删除优惠券
         */
        couponDelete (index) {
            let list = this.controList.data.coupon_nos;

            list.splice(index, 1);
            this.couponList.splice(index, 1);
        },

        /**
         * @deprecated 获取选择商品
         */
        handleSelectGoods (list) {
            this.changeCustonDataCopy = JSON.parse(JSON.stringify(list));//保存选择数据，编辑时使用
            let datas = list.reduce((cur,next) => {
                cur.push(next.goods_no);
                return cur;
            },[]);

            const person = (arr) => {
                let obj = {};
                let list = [];

                list = arr.reduce((cur, next) => {
                    // eslint-disable-next-line no-unused-expressions
                    obj[next.goods_no] ? "" : obj[next.goods_no] = true && cur.push(next);
                    return cur;
                }, []);

                return list;
            };

            this.getSelectShop(datas).then(resp => {
                this.changeCustonData = person(resp);
            });

            // console.log('----选择商品----', this.controList.data.goods_nos);
        },

        /**
         * @deprecated 获取红包数据
         */
        getPacketShowData (row) {
            this.$post('/student/custom_page%5Cget_data_for_app_show', {
                type: 104,
                data_json: JSON.stringify({
                    packet_nos: row.data.packet_nos,
                    hide_invalid: 0
                })
            }, resp => {
                if(resp.code == 1){
                    // this.checkCoupon = false;
                    this.couponList = resp.data.data.packet_list;
                    this.controList.data.packet_nos = row.data.packet_nos;
                }
            });
        },

        // 获取选择红包数据
        emitPacketData(data) {
            // console.log('----选择红包----', data);
            this.$refs.packetSelect.close();
            switch (data.type) {
                case 'share_config':
                    // this.row.share_config['share_award']['packet_no'] = data.list[0]['packet_no'];
                    break;
                case 'packet_nos':
                    if(this.couponList.length === 10) {
                        this.$notify({
                            title: '提示',
                            message: '优惠券最多只可以添加10个',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    this.couponList = this.couponList.concat(data.list);
                    this.controList.data.packet_nos.push(
                        data.list[0]['packet_no']
                    );
                case 'custom_packet':
                    this.$set(this.custompacketList[this.sliderIndex], 'packet_no', data.list[0].packet_no);
                    this.$set(this.custompacketList[this.sliderIndex], 'title', data.list[0].title);
                    this.$set(this.custompacketList[this.sliderIndex], 'discount_info', data.list[0].discount_info);

                    this.$set(this.controList.data.packet_list[this.sliderIndex], 'packet_no', data.list[0].packet_no);
                default:
                    break;
            }
        },

        // 红包排序
        updatePacketList () {
            const nos = this.couponList.reduce((cur,next) => {
                cur.push(next.packet_no);
                return cur;
            },[]);

            this.controList.data.packet_nos = nos;
        },

        /**
         * @deprecated 删除红包
         */
        packetDelete (index) {
            let list = this.controList.data.packet_nos;

            list.splice(index, 1);
            this.couponList.splice(index, 1);
        },

        /**
         * @deprecated 获取选择数据
         */
        getSelectShop (nos) {
            return new Promise((resolve,reject) => {
                this.$post('/student/custom_page%5Cget_data_for_app_show', {
                    type: 103,
                    data_json: JSON.stringify({
                        goods_nos: nos,
                        sort: this.controList.data.sort
                    })
                }, resp => {
                    if(resp.code == 1){
                        resolve(resp.data.data.goods_list);
                    }
                });
            });
        },

        /**
         * @deprecated 设置回显数据
         */
        setShopList () {
            setTimeout(() => {
                this.getSelectShop(this.controList.data['goods_nos']).then(resp => {
                    this.changeCustonData = resp;
                    this.changeCustonDataCopy = JSON.parse(JSON.stringify(resp));
                    setTimeout(() => {
                        this.watchDraggable();
                    },100);
                });
            },100);
        },

        /**
         * @deprecated 监听拖动商品，处理样式异常
         */
        watchDraggable () {
            let list = document.querySelectorAll('._wrap_image');

            list.forEach(el => {
                el.style.backgroundSize = '60px 60px';
            });
        },

        /**
         * @deprecated 删除商品
         */
        deleteCustomImage (index) {
            this.changeCustonData.splice(index, 1);
            this.$nextTick(() => {
                this.watchDraggable();
            });
        },

        /**
         * @deprecated 确认清空所选商品
         */
        confirmClear () {
            this.controList.data.goods_nos = [];
            this.changeCustonData = [];
            this.changeCustonDataCopy = [];
        },

        /**
         * @deprecated 编辑商品
         *      存在问题，this.changeCustonData在重新进入页面为空
         */
        editCustomList () {
            let nos = this.controList.data.goods_nos;
            let list = this.changeCustonDataCopy.filter(item => nos.includes(item.goods_no));

            this.$refs.goodsSelect.edit(2, list);
        },

        /**
         * @deprecated 选择时间校验
         */
        changeDate (type) {
            this.controList.data.start_time = new Date(this.controList.data.start_time).getTime();
            this.controList.data.end_time = new Date(this.controList.data.end_time).getTime();

            if(type == 'start') {
                if(!this.controList.data.end_time) return false;
                if(this.controList.data.start_time >= this.controList.data.end_time) {
                    this.$notify({
                        title: '提示',
                        message: '开始时间要小于结束时间',
                        type: 'warning',
                        duration: 2000
                    });
                    this.controList.data.start_time = '';
                    return false;
                }
            }

            if(type == 'end') {
                if(!this.controList.data.start_time) return false;
                if(this.controList.data.end_time <= this.controList.data.start_time) {
                    this.$notify({
                        title: '提示',
                        message: '结束时间要大于开始时间',
                        type: 'warning',
                        duration: 2000
                    });
                    this.controList.data.end_time = '';
                    return false;
                }
            }
        },

        /**
         * @deprecated 设置样式颜色
         */
        setColor (row) {
            if(row.style.time_style == 2) {
                this.$set(row.style, 'number_color', 'rgba(230, 27, 27, 1)');
            }
        },

        // 社群专享商品逻辑  start

        /**
         * @deprecated 获取选择商品
         */
        handleSelectGoodsCommon (list) {
            this.changeCommonDataCopy = JSON.parse(JSON.stringify(list));//保存选择数据，编辑时使用
            let datas = list.reduce((cur,next) => {
                cur.push(next.gg_no);
                return cur;
            },[]);

            const person = (arr) => {
                let obj = {};
                let list = [];

                list = arr.reduce((cur, next) => {
                    // eslint-disable-next-line no-unused-expressions
                    obj[next.gg_no] ? "" : obj[next.gg_no] = true && cur.push(next);
                    return cur;
                }, []);

                return list;
            };

            this.getSelectCommonShop(datas).then(resp => {
                this.changeCommonData = person(resp);
            });
        },


        /**
         * @deprecated 自定义商品排序
         *  type 1:按数组顺序,2:销量高到低,3:价格低到高,4:价格高到低
         */
        sortCustomListCommon (type) {
            let list = this.controList.data.gg_nos;

            if(!list.length) {
                this.$notify({
                    title: '提示',
                    message: '请先添加商品',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$store.commit('config/SET_CUSTOM_SORT_COMMON', type);
            setTimeout(() => {
                this.$nextTick(() => {
                    this.watchDraggableCommon();
                });
            },150);
        },

        /**
         * @deprecated 获取选择数据
         */
        getSelectCommonShop (nos) {
            return new Promise((resolve,reject) => {
                this.$post('/student/custom_page%5Cget_data_for_app_show', {
                    type: 105,
                    data_json: JSON.stringify({
                        gg_nos: nos,
                        sort: this.controList.data.sort
                    })
                }, resp => {
                    if(resp.code == 1){
                        resolve(resp.data.data.goods_list);
                    }
                });
            });
        },

        /**
         * @deprecated 设置回显数据
         */
        setShopListCommon () {
            setTimeout(() => {
                this.getSelectCommonShop(this.controList.data['gg_nos']).then(resp => {
                    this.changeCommonData = resp;
                    this.changeCommonDataCopy = JSON.parse(JSON.stringify(resp));
                    setTimeout(() => {
                        this.watchDraggableCommon();
                    },100);
                });
            },100);
        },

        /**
         * @deprecated 监听拖动商品，处理样式异常
         */
        watchDraggableCommon () {
            let list = document.querySelectorAll('._wrap_image');

            list.forEach(el => {
                el.style.backgroundSize = '60px 60px';
            });
        },

        /**
         * @deprecated 删除商品
         */
        deleteCustomImageCommon (index) {
            this.changeCommonData.splice(index, 1);
            this.$nextTick(() => {
                this.watchDraggableCommon();
            });
        },

        /**
         * @deprecated 确认清空所选商品
         */
        confirmClearCommon () {
            this.controList.data.gg_nos = [];
            this.changeCommonData = [];
            this.changeCommonDataCopy = [];
        },

        /**
         * @deprecated 编辑商品
         */
        editComminityList () {
            let nos = this.controList.data.gg_nos;
            let list = this.changeCommonDataCopy.filter(item => nos.includes(item.gg_no));

            this.$refs.goodsSelect2.edit(2, list);
        },

        // 社群专享商品逻辑  end

        // 自定义优惠券 start
        /**
         * @deprecated 获取优惠券数据
         */
        getCustomCouponList (row) {
            let data = JSON.parse(JSON.stringify(row.data.coupon_list));

            let _self = this;

            function getinfo (coupon_list, callback) {
                _self.$post('/student/custom_page%5Cget_data_for_app_show', {
                    type: 106,
                    data_json: JSON.stringify({
                        coupon_list: coupon_list,
                        hide_invalid: _self.controList.data.hide_invalid
                    })
                }, resp => {
                    if(resp.code == 1){
                        callback(resp.data.data.coupon_list);
                    }
                });
            }

            if(data.length) {
                let new_list = [];

                for(let i=0; i<data.length; i++) {
                    getinfo([{
                        coupon_no: data[i].coupon_no,
                        cover_image: data[i].cover_image
                    }], info => {
                        if(!info.length) {
                            new_list.push({
                                coupon_no: data[i].coupon_no,
                                discount_info: '',
                                title: '',
                                cover_image: data[i].cover_image,
                                index: i
                            });
                        } else {
                            new_list.push({
                                coupon_no: info[0].coupon_no,
                                discount_info: info[0].discount_info,
                                title: info[0].title,
                                cover_image: info[0].cover_image,
                                index: i
                            });
                        }

                        if(new_list.length === data.length) {
                            new_list = new_list.sort((a,b) => {
                                return a.index - b.index;
                            });

                            this.customCouponList = new_list;
                        }
                    });
                }
            } else {
                this.customCouponList = [];
            }

        },

        handleAddCoupon () {
            if(this.controList.data.coupon_list.length === 9) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以添加9个',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.customCouponList.push({
                coupon_no: '',
                cover_image: ''
            });

            this.controList.data.coupon_list.push({
                coupon_no: '',
                // title: '',
                // discount_info: '',
                cover_image: ''
            });
        },

        handleDeleteData (type, index) {
            if(type == 'coupon') {
                this.customCouponList.splice(index, 1);
                this.controList.data.coupon_list.splice(index,1);
            }

            if(type == 'packet') {
                this.custompacketList.splice(index, 1);
                this.controList.data.packet_list.splice(index,1);
            }
        },
        // 自定义优惠券结束

        // 自定义红包 start
        /**
         * @deprecated 获取红包数据
         */
        getCustompacketList (row) {
            // let data = JSON.parse(JSON.stringify(row));

            // if(data.data.packet_list.length) {
            //     let packet_list = data.data.packet_list.reduce((cur,next) => {
            //         if(next.packet_no && next.cover_image) {
            //             cur.push({
            //                 packet_no: next.packet_no,
            //                 cover_image: next.cover_image
            //             });
            //         }
            //         return cur;
            //     }, []);

            //     console.log('@@@@@@-----', packet_list);

            //     if(packet_list.length && packet_list.length === data.data.packet_list.length) {
            //         this.$post('/student/custom_page%5Cget_data_for_app_show', {
            //             type: 107,
            //             data_json: JSON.stringify({
            //                 packet_list: packet_list,
            //                 hide_invalid: this.controList.data.hide_invalid
            //             })
            //         }, resp => {
            //             if(resp.code == 1){
            //                 this.custompacketList = resp.data.data.packet_list;
            //             }
            //         });
            //     }
            // } else {
            //     this.custompacketList = [];
            // }

            let data = JSON.parse(JSON.stringify(row.data.packet_list));

            let _self = this;

            function getinfo (packet_list, callback) {
                _self.$post('/student/custom_page%5Cget_data_for_app_show', {
                    type: 107,
                    data_json: JSON.stringify({
                        packet_list: packet_list,
                        hide_invalid: _self.controList.data.hide_invalid
                    })
                }, resp => {
                    if(resp.code == 1){
                        callback(resp.data.data.packet_list);
                    }
                });
            }

            if(data.length) {
                let new_list = [];

                for(let i=0; i<data.length; i++) {
                    getinfo([{
                        packet_no: data[i].packet_no,
                        cover_image: data[i].cover_image
                    }], info => {
                        if(!info.length) {
                            new_list.push({
                                packet_no: data[i].packet_no,
                                discount_info: '',
                                title: '',
                                cover_image: data[i].cover_image,
                                index: i
                            });
                        } else {
                            new_list.push({
                                packet_no: info[0].packet_no,
                                discount_info: info[0].discount_info,
                                title: info[0].title,
                                cover_image: info[0].cover_image,
                                index: i
                            });
                        }

                        if(new_list.length === data.length) {
                            new_list = new_list.sort((a,b) => {
                                return a.index - b.index;
                            });

                            this.custompacketList = new_list;
                        }
                    });
                }
            } else {
                this.custompacketList = [];
            }
        },

        handleAddPacket () {
            if(this.controList.data.packet_list.length === 9) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以添加9个',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.custompacketList.push({
                packet_no: '',
                cover_image: ''
            });

            this.controList.data.packet_list.push({
                packet_no: '',
                cover_image: ''
            });
        },
        // 自定义红包结束

        // 分享按钮
        handleChangeFixed (type, style) {
            this.$emit('changePos', {
                type,
                style
            });
        }
    }
};
</script>

<style lang="less" scoped>
.edit {
    width: 375px;
    background: #ffffff;
    margin: 24px 0 0 72px;
    display: inline-block;
    // display: flex;
    // flex-direction: column;
    // box-sizing: border-box;
    // height: 2000px;
    // overflow: hidden;
    // overflow-y: auto;
    position: relative;
    top: 0px;
    transition: all .2s;
    &::-webkit-scrollbar {
        width: 2px;
    }
    .edit-wrap {
        width: 375px;
        display: flex;
        flex-direction: column;
        .edit-title {
            width: 100%;
            height: 57px;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px #F0F2F7 solid;
            margin-bottom: 24px;
            &-text {
                color: #333333;
                font-size: 16px;
                font-weight: 500;
            }
            .el-icon-hand-close {
                font-size: 17px;
                color: #999999;
                cursor: pointer;
                &:hover {
                    color: #1890FF;
                }
            }
        }
        ._wrap {
            width: 346px;
            flex: 1;
            margin: 0 20px;
            box-sizing: border-box;
            ._wrap_item {
                display: flex;
                flex-wrap: wrap;
                margin: 0 9px 10px 0;
                position: relative;
                &:hover {
                    ._wrap_icon {
                        display: block;
                    }
                }
            }
            ._wrap_image {
                width: 60px;
                height: 60px;
                cursor: pointer;
            }
            ._wrap_icon {
                position: absolute;
                top: -8px;
                right: -8px;
                z-index: 99;
                background-color: #ffffff;
                cursor: pointer;
                display: none;
                border-radius: 50%;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                overflow: hidden;
            }
            .el-icon-error {
                color: rgba(0, 0, 0, 1);
                font-size: 17px;
            }
            ._wrap_item:net-child(5n + 5) {
                margin-right: 0;
            }
        }
        ._coupon {
            margin-left: 20px;
            margin-right: 20px;
            box-sizing: border-box;
            ._coupon_title {
                font-size: 14px;
                counter-reset: rgba(51, 51, 51, 1);
                position: relative;
                &::before {
                    content: '*';
                    position: absolute;
                    color: rgba(255, 48, 48, 1);
                    font-size: 14px;
                    top: -1px;
                    left: -7px;
                }
            }
            ._coupon_desc {
                font-size: 12px;
                color: rgba(153, 153, 153, 1);
                margin: 10px 0;
            }
            ._coupon_wrap {
                width: 100%;
                background-color: rgba(251, 251, 251, 1);
                box-sizing: border-box;
                padding: 16px 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                ._coupon_item {
                    width: 295px;
                    height: 37px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #F0F2F7;
                    text-align: center;
                    line-height: 37px;
                    cursor: pointer;
                    position: relative;
                    box-sizing: border-box;
                    padding: 0 15px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    ._coupon_item_cont {
                        width: 265px;
                        height: 37px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    &:hover {
                        ._coupon_delete {
                            display: block;
                        }
                    }
                    ._coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 12px;
                        margin-right: 6px;
                        white-space: nowrap;
                    }
                    ._coupon_info {
                        color: rgba(245, 51, 65, 1);
                        font-size: 12px;
                        white-space: nowrap;
                    }
                    ._coupon_delete {
                        width: 17px;
                        height: 17px;
                        border-radius: 50%;
                        background-color: #ffffff;
                        position: absolute;
                        top: -7px;
                        right: -7px;
                        z-index: 99;
                        cursor: pointer;
                        display: none;
                        .el-icon-error {
                            color: #000000;
                            font-size: 17px;
                        }
                    }
                }
                ._coupon_add {
                    width: 295px;
                    height: 37px;
                    background: #FBFBFB;
                    border-radius: 4px;
                    border: 1px solid #1890FF;
                    text-align: center;
                    line-height: 37px;
                    cursor: pointer;
                    color: rgba(24, 144, 255, 1);
                    .el-icon-plus {
                        margin-right: 3px;
                        font-size: 14px;
                        color: rgba(24, 144, 255, 1);
                    }
                }
            }
            ._coupon_line {
                width: 100%;
                border: 1px rgba(240, 242, 247, 1) dashed;
                margin: 24px 0;
            }
            ._coupon_list {
                display: flex;
                align-items: flex-start;
                margin-bottom: 24px;
                ._coupon_title {
                    font-size: 14px;
                    counter-reset: rgba(51, 51, 51, 1);
                    position: relative;
                    white-space: nowrap;
                    &::before {
                        content: '*';
                        position: absolute;
                        color: rgba(255, 48, 48, 1);
                        font-size: 14px;
                        top: -1px;
                        left: -7px;
                    }
                }
                ._coupon_arr {
                    flex: 1;
                    display: flex;
                    align-items: flex-start;
                }
            }
        }
        .wrap-list, .cate-list, .goodsTag {
            min-height: 14px;
            display: flex;
            align-items: center;
            width: 375px;
            box-sizing: border-box;
            padding-left: 28px;
            margin-bottom: 24px;
            height: auto;
            ._nav {
                flex: 1;
                height: 36px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                margin-right: 20px;
                margin-left: 16px;
                ._nav_button {
                    width: 88px;
                    height: 36px;
                    box-sizing: border-box;
                    border: 1px rgba(24, 144, 255, 1) solid;
                    border-radius: 18px;
                    text-align: center;
                    line-height: 36px;
                    cursor: pointer;
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                }
                ._nav_clear {
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                    cursor: pointer;
                    margin-right: 16px;
                }
                ._nav_edit {
                    width: 70px;
                    height: 36px;
                    box-sizing: border-box;
                    border: 1px rgba(24, 144, 255, 1) solid;
                    border-radius: 18px;
                    text-align: center;
                    line-height: 36px;
                    cursor: pointer;
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                }
            }
            .name {
                color: #333333;
                font-size: 14px;
                position: relative;
                white-space: nowrap;
                &::before {
                    content: '*';
                    position: absolute;
                    top: 0;
                    left: -8px;
                    color: #FF3030;
                    font-size: 15px;
                }
            }
            .name-desc {
                color: #999999;
                font-size: 12px;
                margin-top: 10px;
                margin-bottom: 10px;
                line-height: 18px;
                width: 335px;
            }
            .wrap-side {
                width: 335px;
                height: 64px;
                background: #FBFBFB;
                position: relative;
                cursor: pointer;
                .side-list {
                    width: 335px;
                    height: 64px;
                    display: flex;
                    justify-content: center;
                    border: 1px dashed #D8D8D8;
                    align-items: center;
                    .el-icon-hand-iconjia {
                        color: #88909C;
                        font-size: 14px;
                    }
                    .side-text {
                        color: #88909C;
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }
                .side-content {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 335px;
                    height: 64px;
                    display: flex;
                    align-items: center;
                    &-image {
                        width: 296px;
                        height: 64px;
                        margin-right: 11px;
                    }
                    .el-icon-hand-shanchu1 {
                        color: #333333;
                        font-size: 18px;
                        cursor: pointer;
                    }
                }
                .upload-title-image {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 296px;
                    height: 64px;
                    z-index: 10;
                    opacity: 0;
                }
                .upload-title-hover {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 296px;
                    height: 64px;
                    z-index: 5;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0,0,0,.6);
                    .title-hover {
                        width: 72px;
                        height: 26px;
                        border-radius: 13px;
                        border: 1px solid #FFFFFF;
                        text-align: center;
                        line-height: 26px;
                        color: #ffffff;
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
            }
            .names {
                color: #333333;
                font-size: 14px;
                margin-right: 10px;
                margin-top: 3px;
            }
            .wrap-color {
                width: 196px;
                height: 36px;
                background: #FBFBFB;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                display: flex;
                align-items: center;
                margin-left: 47px;
                position: relative;
            }
            .wrap-rest {
                width: 60px;
                height: 36px;
                position: absolute;
                top: 0;
                right: 0;
                color: #333333;
                font-size: 14px;
                cursor: pointer;
                border-left: 1px #DCDFE6 solid;
                text-align: center;
                line-height: 36px;
            }
            .upload {
                height: 68px;
                display: flex;
                align-items: center;
                cursor: pointer;
                .upload-wrap {
                    width: 68px;
                    height: 68px;
                    box-sizing: border-box;
                    border: 1px dashed #D8D8D8;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    .el-icon-hand-iconjia {
                        font-size: 16px;
                        color: #88909C;
                        margin-top: 14px;
                    }
                    .upload-text {
                        color: #88909C;
                        font-size: 12px;
                        margin-top: 6px;
                    }
                    .upload-image {
                        position: absolute;
                        width: 68px;
                        height: 68px;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        cursor: pointer;
                    }
                    .upload-good-image {
                        position: absolute;
                        width: 68px;
                        height: 68px;
                        left: 0;
                        top: 0;
                        z-index: 2;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
                .upload-desc {
                    color: #999999;
                    font-size: 12px;
                    margin-left: 10px;
                    height: 68px;
                    line-height: 123px;
                }
            }

            //圆角
            .rate {
                height: 36px;
                display: flex;
                flex-direction: row;
                margin-left: 87px;
                align-items: center;
                cursor: pointer;
                position: relative;
                .rate-icon {
                    width: 36px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;
                    background: #FBFBFB;
                    position: relative;
                    z-index: 999;
                    i {
                        font-size: 24px;
                        color: #999;
                    }
                }
                .rate-wrap {
                    width: 194px;
                    height: 124px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    position: absolute;
                    left: -192px;
                    top: -42px;
                    .rate-wrap-bg {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 194px;
                        height: 124px;
                        z-index: 2;
                    }
                    .rate-wrap-content {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 194px;
                        height: 124px;
                        z-index: 10;
                        padding: 22px 32px;
                        flex-wrap: wrap;
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
            .rate-main {
                width: 335px;
                height: 108px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                background: #FBFBFB;
                padding-left: 20px;
                .rate-main-ipt {
                    position: relative;
                    width: 146px;
                    height: 78px;
                    .rate-wrap-bg {
                        width: 146px;
                        height: 78px;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    .rate-main-content {
                        width: 146px;
                        height: 78px;
                        display: flex;
                        flex-wrap: wrap;
                        box-sizing: border-box;
                        padding: 9px 11px;
                        justify-content: space-between;
                    }
                }
            }

            //轮播
            .slider {
                display: flex;
                flex-direction: column;
                margin-bottom: 24px;
                .slider-head {
                    height: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    cursor: pointer;
                }
            }
            .add-slider {
                width: 335px;
                height: 34px;
                background: #FBFBFB;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px dashed #D8D8D8;
                color: #1890FF;
                font-size: 12px;
                cursor: pointer;
                .el-icon-hand-iconjia {
                    color: #1890FF;
                    font-size: 12px;
                    margin-right: 10px;
                }
            }
            //多图
            .wrap-multi {
                width: 100%;
                display: flex;
                flex-direction: column;
            }

            // 分享
            .__share_button {
                width: 335px;
                height: 280px;
                background: rgba(251, 251, 251, 1);
                margin-top: 19px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding: 18px 20px;
                .__share_list {
                    display: flex;
                    align-items: flex-start;
                    .__share_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 10px;
                        white-space: nowrap;
                    }
                }
            }
        }
        .wrap-cate {
            width: 335px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            margin: 0 0 24px 20px;
            padding: 16px 20px;
            padding-left: 50px;
            .cate-list {
                height: 36px;
                display: flex;
                align-items: center;
                .cate-text {
                    color: #333333;
                    font-size: 14px;
                    margin-right: 15px;
                    white-space: nowrap;
                }
            }
        }
        .left {
            padding-left: 0px;
            align-items: flex-start;
        }
        .wrap-share {
            width: 335px;
            background: #FBFBFB;
            box-sizing: border-box;
            padding: 20px;
            margin-left: 20px;
        }
        .wrap-content {
            display: flex;
            flex-direction: column;
            .wrap-title-text {
                margin-left: 16px;
            }
        }
        //角标
        .goodsTag {
            width: 335px;
            background: #FBFBFB;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-top: 20px;
            margin-left: 20px;
            .goodsTag-title {
                color: #333333;
                font-size: 14px;
                height: 14px;
                margin-bottom: 20px;
                margin-left: 20px;
            }
            .tag-selecr {
                display: flex;
                height: 16px;
                align-items: center;
            }
            .goodsTag-wrap {
                display: flex;
                width: 100%;
                flex-direction: column;
                .tag-title {
                    color: #333333;
                    font-size: 12px;
                    margin-left: 20px;
                    margin-top: 20px;
                    margin-bottom: 16px;
                }
            }
        }
        // 倒计时
        ._count {
            width: 100%;
            padding: 0 20px 20px 20px;
            ._count_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                font-weight: 500;
            }
            ._count_text {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                position: relative;
                margin-left: 5px;
                &::before {
                    content: '*';
                    position: absolute;
                    left: -6px;
                    top: 0;
                    color: rgba(255, 48, 48, 1);
                }
            }
            ._count_item {
                height: 36px;
                width: 100%;
                display: flex;
                margin-top: 24px;
                align-items: center;
                .wrap-color {
                    width: 196px;
                    height: 36px;
                    background: #FBFBFB;
                    border-radius: 4px;
                    border: 1px solid #DCDFE6;
                    display: flex;
                    align-items: center;
                    margin-left: 47px;
                    position: relative;
                }
                .wrap-rest {
                    width: 60px;
                    height: 36px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: #333333;
                    font-size: 14px;
                    cursor: pointer;
                    border-left: 1px #DCDFE6 solid;
                    text-align: center;
                    line-height: 36px;
                }
            }
            ._count_list {
                height: 15px;
                display: flex;
                align-items: center;
                margin-top: 24px;
            }
            ._count_line {
                width: 100%;
                border: 1px rgba(240, 242, 247, 1) dashed;
                margin: 24px 0;
            }
        }

        // 自定义优惠券
        .__coupon {
            width: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            // border: 1px red solid;
            .__coupon_items {
                width: 335px;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                border-bottom: 1px rgba(240, 242, 247, 1) dashed;
                padding-bottom: 20px;
                margin-bottom: 20px;
                .__coupon_header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    p {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        position: relative;
                        &::before {
                            content: '*';
                            position: absolute;
                            left: -7px;
                            top: 0px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                        }
                    }
                    .el-icon-hand-close {
                        color: rgba(51, 51, 51, 1);
                        font-size: 16px;
                        cursor: pointer;
                    }
                }
                .__coupon_img {
                    width: 335px;
                    height: 64px;
                    display: flex;
                    align-items: center;
                    .__coupon_left {
                        width: 296px;
                        height: 64px;
                        position: relative;
                        cursor: pointer;
                        .__coupon_cover {
                            width: 296px;
                            height: 64px;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        .__coupon_tc {
                            width: 296px;
                            height: 64px;
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 10;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: rgba(0, 0, 0, .6);
                            p {
                                width: 72px;
                                height: 26px;
                                border-radius: 13px;
                                border: 1px rgba(255, 255, 255, 1) solid;
                                text-align: center;
                                line-height: 26px;
                                color: rgba(255, 255, 255, 1);
                                font-size: 12px;
                            }
                        }
                        .upload_title_image {
                            width: 296px;
                            height: 64px;
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 11;
                            opacity: 0;
                            cursor: pointer;
                        }
                    }
                    .__coupon_delete {
                        width: 18px;
                        height: 20px;
                        margin-left: 11px;
                        cursor: pointer;
                    }
                }
                .__coupon_add {
                    width: 335px;
                    height: 36px;
                    border: 1px rgba(32, 160, 255, 1) dashed;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: rgba(32, 160, 255, 1);
                    font-size: 12px;
                    margin: 10px 0;
                    cursor: pointer;
                    .iconfont {
                        color: rgba(32, 160, 255, 1);
                        font-size: 16px;
                        margin-right: 10px;
                    }
                }
                .__coupon_data {
                    width: 335px;
                    height: 36px;
                    border: 1px rgba(240, 242, 247, 1) solid;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 10px 0;
                    cursor: pointer;
                    .__coupon_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 12px;
                        margin-right: 6px;
                    }
                    .__coupon_limit {
                        color: rgba(245, 51, 65, 1);
                        font-size: 12px;
                    }
                }
                .__coupon_change {
                    width: 335px;
                    height: 64px;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px rgba(216, 216, 216, 1) dashed;
                    background: rgba(251, 251, 251, 1);
                    cursor: pointer;
                    .upload-title-image {
                        width: 335px;
                        height: 64px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 10;
                        opacity: 0;
                        cursor: pointer;
                    }
                    .__coupon_img_url {
                        width: 335px;
                        height: 64px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: rgba(136, 144, 156, 1);
                        font-size: 12px;
                        .iconfont {
                            color: rgba(136, 144, 156, 1);
                            font-size: 16px;
                            margin-right: 10px;
                        }
                    }
                }
            }
            .__add_coupon {
                width: 335px;
                height: 34px;
                border: 1px rgba(24, 144, 255, 1) solid;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 24px;
                margin-left: 20px;
                cursor: pointer;
                color: rgba(24, 144, 255, 1);
                font-size: 12px;
                .iconfont {
                    font-size: 16px;
                    color: rgba(24, 144, 255, 1);
                    margin-right: 9px;
                }
            }
            .__coupon_lines {
               border-top: 1px rgba(240, 242, 247, 1) dashed;
               margin-bottom: 24px;
            }
            .__coupon_set {
                width: 335px;
                box-sizing: border-box;
                padding: 0 20px;
                .__coupon_set_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    font-weight: 500;
                    margin-bottom: 14px;
                }
                .__coupon_slider {
                    width: 335px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 6px;
                    .__coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 16px;
                    }
                    .__coupon_max {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }
                .__coupon_radio {
                    width: 335px;
                    display: flex;
                    align-items: flex-start;
                    margin-top: 20px;
                    .__coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 15px;
                        position: relative;
                        white-space: nowrap;
                        &::before {
                            content: '*';
                            position: absolute;
                            left: -7px;
                            top: 0px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                        }
                    }
                    .__coupon_list {
                        width: 264px;
                        display: flex;
                        flex-wrap: wrap;
                    }
                }
                .__coupon_preview {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20px;
                    width: 335px;
                    .__coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 15px;
                        position: relative;
                        white-space: nowrap;
                        &::before {
                            content: '*';
                            position: absolute;
                            left: -7px;
                            top: 0px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                        }
                    }
                }
                .__coupon_width {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                    width: 335px;
                    .__coupon_px {
                        color: rgba(153, 153, 153, 1);
                        font-size: 12px;
                        position: relative;
                        left: -30px;
                        z-index: 10;
                    }
                }
                .__coupon_color {
                    width: 100%;
                    height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    .__coupon_color_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                    }
                    .wrap-color {
                        width: 196px;
                        height: 36px;
                        background: #FBFBFB;
                        border-radius: 4px;
                        border: 1px solid #DCDFE6;
                        display: flex;
                        align-items: center;
                        margin-left: 47px;
                        position: relative;
                        .wrap-rest {
                            width: 60px;
                            height: 36px;
                            position: absolute;
                            top: 0;
                            right: 0;
                            color: #333333;
                            font-size: 14px;
                            cursor: pointer;
                            border-left: 1px #DCDFE6 solid;
                            text-align: center;
                            line-height: 36px;
                        }
                    }
                }
                .__coupon_config {
                    width: 335px;
                    height: 210px;
                    background: #f8f8f8;
                    box-sizing: border-box;
                    padding: 20px;
                    margin-top: 13px;
                    .__coupon_color {
                        width: 100%;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 10px;
                        .__coupon_color_name {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                        }
                        .wrap-color {
                            width: 196px;
                            height: 36px;
                            background: #FBFBFB;
                            border-radius: 4px;
                            border: 1px solid #DCDFE6;
                            display: flex;
                            align-items: center;
                            margin-left: 47px;
                            position: relative;
                            .wrap-rest {
                                width: 60px;
                                height: 36px;
                                position: absolute;
                                top: 0;
                                right: 0;
                                color: #333333;
                                font-size: 14px;
                                cursor: pointer;
                                border-left: 1px #DCDFE6 solid;
                                text-align: center;
                                line-height: 36px;
                            }
                        }
                    }
                    .__coupon_slider {
                        width: 295px;
                        display: flex;
                        align-items: center;
                        margin-bottom: 2px;
                        .__coupon_name {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            margin-right: 16px;
                        }
                        .__coupon_max {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            margin-left: 10px;
                        }
                    }
                    .__coupon_remark {
                        color: rgba(153, 153, 153, 1);
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .requires {
        position: relative;
        &::before {
            content: '*';
            position: absolute;
            left: -7px;
            top: 0;
            z-index: 999;
            color: #FF3030;
            font-size: 14px;
        }
    }
}
</style>

<style lang="less">
.editControl {
    .el-radio {
        margin-right: 24px;
    }
    .el-radio__label {
        padding-left: 6px;
    }
    .el-input__inner, .el-textarea__inner {
        background: #FBFBFB;
    }
    .edit-tab-bg, .el-color-picker__trigger {
        width: 96px;
        height: 20px;
        padding: 0;
    }
    .el-color-picker__trigger {
        margin-left: 20px;
        border: 1px solid #000000;
        border-radius: 0px;
    }
    .el-color-picker__color {
        border: none;
    }
    .el-icon-arrow-down:before {
        content: "";
    }
    .uploadControl {
        .el-upload__input {
            width: 68px;
            height: 68px;
            display: block;
        }
        .el-upload--picture-card {
            width: 68px;
            height: 68px;
        }
    }
    .el-slider__button {
        border: 2px solid #2FBDB3;
    }
    .el-slider__bar {
        background-color: #2FBDB3;
    }
    ._coupon_arr {
        .el-radio {
            .el-radio__label {
                margin-left: 0px;
            }
        }
    }
    .__coupon_list {
        .el-radio__label {
            padding-left: 3px;
        }
        .el-radio {
            margin-right: 11px;
        }
    }
    .el-textarea__inner {
        resize: none;
    }
}
</style>
